Vue.js DevToolsとは

Vue.jsの開発をサポートするChromeまたはFirefoxの拡張機能。 導入するとdataをコンソールに出して確認しなくてよかったり、Componentの状態や構造、Vuexを導入していればStoreの状態の確認もできます。Eventの履歴も追っかけることができるので、効率よくデバッグすることができます。

引用：https://smallit.co.jp/blog/841/

• dataをコンソールに出して確認しなくてもOK
• Componentの状態や構造を確認できる
• Vuexを導入している場合、Storeの状態も確認できる
• Eventの履歴も追いかけることができる＝デバッグの効率が上がる

1. Vue.js DevToolsの導入方法

1. chromeウェブストアでVue.js devtoolsを検索する

   ▼Vue.js devtools

   https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja

   

2. Chromeに追加ボタンをクリック

3. 追加できたら、ピン固定ですぐに表示できるようにする

   

2. Vue.js DevToolsを有効にする

1. ブラウザ上にある点3つをクリックし、その他のツール ＞ 拡張機能からVue.js devtoolsの詳細を開く

   

   

2. 「ファイルのURLへのアクセスを許可する」をONにする

   

3. Vueの開発サーバーを開き、Vueアイコンが有効になっているか確認する

   

3. Vue.js DevToolsの使い方

1. 検証ツールを開き、上部バーの >> をクリックして、Vueをクリックする

   

2. 以下のようにVue DevToolsが開けばOK