Google ChromeのデベロッパーツールにVueタブが表示されない

Vue.jsの学習開始。

Vue.jsの開発では欠かせないとされているChromeの拡張機能「Vue.js devtools」を早速インストール。

Vue.js devtools

と思いきや、早速タイトルの問題発生。

Google先生にお尋ねしたところ、以下のサイトが参考になった。

https://stackoverflow.com/questions/41215867/why-is-vue-js-chrome-devtools-not-detecting-vue-js

要はローカルファイルに対しては「Vue.js devtools」を許可しない設定になっていたのが原因。

設定方法は以下の通り。

1. Chromeのアドレスバーに chrome://extensions/ を入力してオープン。
2. Vue.js devtoolsの詳細ボタンをクリック。
3. ファイルのURLへのアクセスを許可するをONに設定。

めでたく表示されました。

以上です。

今日も一隅を照らすことができますように。それではまた。