ChromeにVue.js Devtoolsを導入して、開発を効率化[Vue.js]

もっと効率的にVue.jsの開発を進められないかと思ってツールを探してみました。
Vue.jsで開発をするときに便利なツールがChromeの拡張機能にありました。

コンポーネントのつながりの確認やdataの確認など簡単にできるようになります。導入は簡単です！

Vue.js Devtools の導入方法

Chromeで下記サイトにアクセスし拡張機能をインストールします。

拡張機能をインストールすると、Vue.jsで開発されているサイト（ページ）をクロームで開くと、拡張機能「Vue.js Devtools」のアイコンがアクティブになります。
アクティブの時に、「Chrome DevTools」を開くと「Vue」の項目が追加されています。（下図）

AWSのEC2などサーバ上で開発している場合など、Vue.js devtoolsが機能しない場合があります。
試しにアイコンをクリックしてみると

と表示されていませんか？

上記の場合、vue.jsを読み込んでいるファイル、たとえばapp.jsに下記のようにconfigを追加します。

// app.js
import Vue from 'vue'

// add this line
Vue.config.devtools = true;

new Vue({
    el: '#app',
    ...

正しく機能している場合は、拡張機能のアイコンをクリックすると下図のように表示されます。

正しく動作しているのを確認できたら、Google DevToolsを開きなおすと「Vue」の項目が増えていると思います。

ページ内で使用されているコンポーネントが表示されます。
各コンポーネントをクリックすると、dataやcomputedの確認などができます。

Vuexを使用してStoreされているデータがある場合表示されます。

トリガーしたイベントの履歴が確認できます。

ルーティングの履歴が確認できます。from、toなど簡単に確認できます。

「START」を押してページを遷移したりページを表示したりすることでパフォーマンスを計測できます。
簡易的ですが、コンポーネントのレンダースピードなどを計測できます。

以上簡単ですが、Vue Devtoolsの使い方をまとめてみました。
自分の使用感としては、とても効率があがったので、Vue.jsで開発している方はぜひ導入してみることをおすすめします。

書籍は読む方だと思いますが、やはり現場で実装するとより深く学べるのを実感します。
逆に実装中心だと、より良いコーディングを考えることができなくなるので書籍もあらためて読むことをおすすめします。

これからはじめるVue.js実践入門
JavaScript、Vue.jsの知識がある程度ある方向け