Vue.js devtoolsのインストール

Vue.js devtoolsはVue.jsを利用して開発するアプリケーションのデータ(変数の値)などをリアルタイムに確認できるブラウザーの拡張機能です。

Vue.js devtoolsを使えば、現在の状態(dataやcomputedなど)を視覚的に確認することができるので、デバッグや調査などがとてもやりやすくなります。

Vue.jsの公式サイトには以下のように記載されており、Vue.jsを利用したWebアプリケーション開発では、Vue.js devtoolsの導入が勧められています。

Vue Devtools

Vue を使用する場合は、ブラウザに Vue Devtools (opens new window)をインストールすることをお勧めします。これにより、Vue アプリケーションをよりユーザーフレンドリーなインターフェースで調査、デバッグすることが可能になります。

Vue.js インストール Vue Devtools

Vue.js devtoolsはとても便利なツールです。
Vue.jsを利用したアプリケーションの開発時には、大いに役に立ってくれます。
今まで「console.log」や「alert」を使用してデバッグや調査をしていた方には、ぜひとも使ってもらいたいと思います。

そこで今回は、Vue.js devtoolsをインストールする手順について紹介します。

本記事では、Google Chrome用とFirefox用のインストールを行います。

Vue.jsをまだインストールしていない方は、こちらの記事もご覧ください。

Vue.jsのインストール(ダウンロード・NPM・CDN)
Vue.js(ヴュー・ジェイエス)は、Webアプリケーション(ネットワークアプリケーション)のUI(ユーザーインターフェース)を構築...

Chrome用Vue.js devtoolsのインストール

Chrome用Vue.js devtoolsはChromeのブラウザー拡張機能なので、「chrome ウェブストア」から入手することができます。
chrome ウェブストアのVue.js devtoolsのページには、Vue.jsのインストールページにあるリンクから移動することができます。

Vue Devtools Chrome ウェブストアへのリンク

「Chrome 拡張版を入手」のリンクをクリックすると以下のページに移動します。

Vue Devtools Chrome ウェブストア

画面の右上にある「Chrome に追加」ボタンをクリックします。

Vue Devtools Chrome ウェブストアの追加ボタン

「Chrome に追加」ボタンをクリックすると、確認のダイアログボックスが表示されます。

Vue Devtools Chrome ウェブストアの追加ボタンクリック時の確認ダイアログボックス

確認ダイアログボックスの「拡張機能を追加」ボタンをクリックします。

Vue Devtools Chrome ウェブストアの追加ボタンクリック時の確認ダイアログボックスの拡張機能を追加ボタン

「拡張機能を追加」ボタンをクリックするとChromeにVue.js devtoolsのアドオンが追加されます。

Vue Devtools Chrome ウェブストア 拡張機能追加後のダイアログボックス

Firefox用Vue.js devtoolsのインストール

Chromeと同様に、Firefox用Vue.js devtoolsもFirefoxのブラウザー拡張機能なので「Firefox Browser ADD-ONS」から入手することができます。
chrome ウェブストアのVue.js devtoolsのページには、Vue.jsのインストールページにあるリンクから飛ぶことができます。

Vue Devtools Firefox Browser ADD-ONSへのリンク

「Firefox アドオン版を入手」のリンクをクリックすると以下のページに移動します。

Vue Devtools Firefox Browser ADD-ONS

画面の中央にある「Add to Firefox」ボタンをクリックします。

Vue Devtools Firefox Browser ADD-ONSの追加ボタン

「Add to Firefox」ボタンをクリックすると、確認のダイアログボックスが表示されます。

Vue Devtools Firefox Browser ADD-ONS 拡張機能追加後の確認ダイアログボックス

確認ダイアログボックスの「追加」ボタンをクリックします。

Vue Devtools Firefox Browser ADD-ONS 拡張機能追加後の確認ダイアログボックスの追加ボタン

「追加」ボタンをクリックするとChromeにVue.js devtoolsのアドオンが追加され、以下のダイアログボックスが表示されます。

Vue Devtools Firefox Browser ADD-ONS 拡張機能追加完了のダイアログボックス

「この拡張機能のプライベートウィンドウでの実行を許可する」のチェックボックスは必要があればクリックしてチェックをONにしてください。

Vue Devtools Firefox Browser ADD-ONS 拡張機能追加完了のダイアログボックスのプライベートウィンドウでの実行許可確認チェック

「OK」ボタンをクリックしてアドオンの追加を終了します。

Vue Devtools Firefox Browser ADD-ONS 拡張機能追加完了のダイアログボックスのOKボタン

Chromeでの拡張機能 > Vue.js devtoolsの設定

Vue.js devtoolsをChromeにインストールできたら、ローカル環境でHTMLファイルをブラウザーで直接開いた場合でもVue.js devtoolsを使用できるように設定します。

Chromeのウィンドウの右上にある拡張機能のアイコンをクリックします。

Chromeの拡張機能のアイコン

アイコンをクリックすると拡張機能の一覧が表示されます。

Chromeの拡張機能の一覧リスト

「Vue.js devtools」の右にある三点リーダーをクリックします。

Chromeの拡張機能の一覧リストのVue.js devtoolsの三点リーダー

三点リーダーをクリックするとメニューが表示されます。

Chromeの拡張機能 Vue.js devtoolsのメニュー

メニューにある「拡張機能を管理」をクリックします。

Chromeの拡張機能 Vue.js devtoolsの拡張機能を管理メニュー

「拡張機能を管理」メニューをクリックするとVue.js devtoolsの設定画面が表示されます。

Chromeの拡張機能 Vue.js devtoolsの設定

「ファイルの URL へのアクセスを許可する」のスイッチをクリックしてONにします。

Chromeの拡張機能 Vue.js devtoolsの設定のファイルのURLへのアクセスを許可するのスイッチ

補足

「ファイルの URL へのアクセスを許可する」が英語で表記されている場合は「Allow access to file URLs」と表示されています。

Vue.js devtoolsの注意点

Vue.js devtoolsが使用可能なのは、開発モード(vue.js)のVueのみなります。本番モード(vue.min.js)のVueを読み込んでVue.js devtoolsを開こうとしても、コンソール画面のメニューにはVueが表示されませんのでご注意ください。

Vue.js 入門 Tips 一覧