そういう、モデルなんです。

ビジネスモデル、3Dモデル、設計図、模型などの現状と動向を考察、関連書籍の紹介

Vue.js devtools インストール

Vue.js & Nuxt.js超入門

Vue.js & Nuxt.js超入門

 

を参考に、Google Chromeプラグインをダウンロード。 
 Vue.js デベロッパーツールが追加された。

しかし夜遅かったので、続きはやらずに寝た。

Vue.js のアイコンが見当たらない

翌日、設定の続きをやろうとしたら、デベロッパーツールは発見できたが、Vue.js のアイコンがツールバーに見当たらなかった。

f:id:tombi-aburage:20190413082326p:plain

どうやらインストールの時には、普段使っていない Googleアカウントを使っていたらしく、Vue.js のアイコンはそちらに追加されたと思われる。

アカウントを切り替えて、再びインストール作業

全く同じ作業を繰り返して、切り替えたアカウントの方にデベロッパーツールのプラグインを追加した。

すると Vue.js のアイコンが表示され、[拡張機能を管理] ができるようになった。 

f:id:tombi-aburage:20190413084742p:plain

 ファイルの URL へのアクセスを許可する

右クリックで設定を行った。

Vue が関係ない画面では、アイコンを押しても何も起きない

左クリックすると、

Vue.js not detected

と表示されて何も起きないが、多分 Vue.js が表示している画面ではないからだろう。

Vue で作られた画面では、

左クリックすると、

Vue.js is detected on this page. Open DevTools and look for the Vue panel.

と表示される。Chrome デベロッパーツールを開くと、Vue タブ(Vue panel)が追加されており、利用できるようになっている。

f:id:tombi-aburage:20190513090516p:plain

developer tools に Vue タブが表示された