「Vue.js devtools (v5.1.0)」のインストール、設定、機能を紹介

最近、インターン先でVue.jsを使うようになったので勉強しているのですが、純正の開発者ツールではデバッグが何かと大変だったので、「Vue.js Devtools」というChromeの拡張機能をインストールしてみました。
インストール方法、設定方法、機能を紹介したいと思います。

Vue.js Devtoolsについて

Vue.js DevtoolsはChromeの拡張機能で、Vue.jsの公式が提供しています。開発者ツールに「Vue」というタグが追加され、Vue.jsの動きがより分かりやすくなります。

頻繁にアップデートされており、最新(2019年5月18日現在)ではv5.1.0です。また、v5.0.0から新たに「routing」と「performance」という機能が追加されたようです。

旧バージョンをダウンロードしたい方はGitがあるので、こちらから探してダウンロードしてください。

導入方法

こちらのリンクにアクセスして、右上の「Chromeに追加」というボタンをクリックしてください。

これでインストールは完了です。お疲れ様です。




設定方法

インストールするとChromeの右上にアイコンは出ますが、設定を変更しなければ開発者ツールで使用することはできません。

まず、Chromeの「その他ツール」→「拡張機能」を開きます。

インストールされている拡張機能がずらっと並んでいるのでVue.js devtoolsの「詳細」をクリックしてください。

設定画面です。権限を与えないと使用できないようになっているので、「ファイルのURLへのアクセスを許可する」をオンにします。

vue.jsが使われているページで開発者ツールに「Vue」というタグが追加されているか確認してください。
右の「>>」に埋もれている場合もあります。ドラッグ&ドロップでタブの順番を並び替えることができるので左の方に移すと便利かもしれません。

使用方法

まず、Vue.jsが使われているページをChromeで開きます。Vue.jsが使われているかどうかは右上のVue.jsのアイコンの色で確認します。色が付いていれば、そのページで使われており、アイコンがモノクロになっていればVue.js使わていません。

Vue.js Devtoolsには基本的に5つの機能があります。以下で簡単に紹介します。

・Components

コンポーネントに含まれているdataなどを確認、編集、追加することができます。

・Vuex

Vuexを使っている場合に限り、storeを確認することができます。

・Events

イベント発火の履歴を確認することができます。

・Routing

routerの確認、route情報を参照することができます。

・Performance

ページでの動きをタイムリーに分析、参照することができます。




ひとこと

Vue.jsは最近学習し始めたばかりなのですが、何か便利なツールがあれば教えていただけると嬉しいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です