【Vue】開発ツールのご紹介 - Vue.js devtools

Vue.jsを使用したWebアプリケーション開発に役立つツール「Vue.js devtools」の導入方法、起動方法、基本的な使い方について説明しています。特に、コンポーネントの管理やデバッグを効率化するための機能を紹介しています。

はじめに

Vue.jsは、WebアプリケーションのUI構築に用いられるJavaScriptフレームワークです。
どのフレームワークにも言えることですが、プロジェクトが大規模になるにつれて、コンポーネントの管理やデバッグが難しくなることもあります。

そこで今回は、Vue.jsを使用しているプロジェクト向けの開発ツール、「Vue.js devtools」^[1]についてご紹介します。

導入方法

「Vue.js devtools」はGoogle Chromeの拡張機能です。
以下よりダウンロードできます。

Chromeメニュー>拡張機能>拡張機能を管理より、Vue.js devtools を有効化することで利用できるようになります。

フロントエンドの開発環境とブラウザでの確認を同一PCで運用されている方は、Vue.js devtools>詳細を開き、「ファイルの URL へのアクセスを許可する」をONにしてください。

起動方法

まず、Vueを使用したフロントエンド環境をVisual Studio Code（VSCode）でデバッグ起動しておきます。
起動したら、Chromeブラウザでページを開きます。

F12キーを押して開発者ツールを表示し、「Vue」タブを選択します。

「Vue」タブが表示されない場合は、何秒か待ったり、F5でページをリロードしたり、F12で開発者ツールを何度か開きなおしてみてください。

使い方

Vue.js devtools には色々な機能がありますが今回はその中から、代表的な機能であるComponents機能についてご紹介します。

devtoolsの左側のメニューから、Componentsを選択します。

以下のアイコンをクリックします。

ブラウザ上の調べたい領域にカーソルを当てると、コンポーネント名が表示されます。
コンポーネント上でクリックすると、devtoolsウィンドウで階層やpropsなどを確認できます。
階層のツリー表示にカーソルを当てると、対応するコンポーネントがブラウザ上にハイライト表示されるので、どこまでがどのコンポーネントなのか一目で分かります。