はじめに
こちらでは vue.js のdevtoolsについて使い方を簡単に解説します。
devtoolsとは
Vue.js devtoolsは、Vue.jsの開発をサポートする Chromeブラウザの拡張機能 になります。こちらを導入すると、consoleを開かなくてもdataの中身などを確認/編集することができる
ようになります。言い換えると、デバッグしやすくなるということです。
★ devtools は以下からインストールが可能です
インストールができていれば、Vue.jsを読み込んでいるファイルをブラウザ上で開くと、Vue.js Devtoolsのアイコンがアクティブになります。また、ディベロッパーツールを開くと、vueというタブが追加されます。
↑アイコンがアクティブな状態
↑ディベロッパーツールのタブ
devtools の主な機能
今回は主な機能を3つ紹介します。
1. Components
Components機能を使用することで、各コンポーネントの親子関係や保持しているdataの内容などを確認することが可能になります。
・操作方法は3つです。
1. ディベロッパーツールのvueタブからComponentsを選択します。
2. Componentsの左下にあるselectsを選択します。
3. カーソルを任意のコンポーネントへ移動させます。
以上の操作で、任意のコンポーネントの親子関係や、保持しているdataの内容を確認することができます。
2. Vuex
Vuex機能を使用することで、Vuex※を使用している場合、storeの中の状態を確認することが可能になります。
※Vuexとは何か-公式ドキュメントより参照
・操作方法は２つです。
1. ディベロッパーツールのタブからVuexを選択します。
2. ディベロッパーツール内に表示されている任意のデータを選択して内容を確認します。
以上の操作で、Vuexを使用している場合、storeの中の状態を確認することができます。
3. Events
Events機能を使用することで、イベントがトリガーされた履歴を確認することが可能になります。
・操作方法は3つです。
1. ディベロッパーツールのタブからEventsを選択します。
2. 任意のイベントをトリガーします。※画面をスクロールするなど
3. ディベロッパーツール内に表示されている任意の履歴を選択して内容を確認します。
まとめ
今回は、Vue.js devtools の使い方を簡単にまとめました。今後新しい使い方などを発見した際は追記します。
実際に私が使ってみた感想としては、わざわざコンソールでデータの中身を確認したりする必要がなくなり、デバッグが楽にできるなと思いました。ぜひみなさんも使ってみてください！