概要
「Vue.js devtools」をChromeに入れると、デバッグ作業が快適になるよ！、って話。
インストール方法
「Vue.js devtools」でGoogle検索すると、Chromeウェブストアの以下のURLがヒットするので、クリックしてジャンプ。
インストール時に「アクセスしたウェブサイト上にある自分の全データの読み取りと変更をこの拡張機能に許可します。」って聞かれるので「はい」と許可。
許可したくない場合は、いったん「いいえ」で拒否った後に次のようにする。
Chromeメニューの「拡張機能＞Vue.js devtools＞詳細＞サイトへのアクセス」を開いて、「特定のサイト」を選択して「http://127.0.0.1/*」などと入れる。Vue.jsのデバッグを行う時のローカルサーバーは、通常は「http://127.0.0.1:8080/」になるので、このローカルサーバー上のデータに対してのみ読み取りと変更を許可すればOK。
状態を反映するため、いったんChromeを再起動する。
後は、Vue.jsの開発用ローカルサーバーを起動していつものように「http://127.0.0.1:8080/」へアクセスする。
F12キーで「ディベロッパーツール」を開いて、「Memory」等のタブの右端に（無い場合は「＞＞」をクリックして展開する）、「Vue」を開く（※許可したURL以外では「Vue」タブは表示されない）。
すると、次のようにデバッグできる。変数の状態をその場で確認できる。便利♪
以上ー。