Vue.js devtoolsのChrome用拡張機能で"Vue"が現れなかったが解決した。


概要

Google Chromeの拡張機能 Vue.js devtoolsの導入記事は既にありますが、それらを読んでも導入がうまくできませんでした。ここでは、恥を忍んでその解決法をご紹介します。

何が起こったか

大体のVue.js devtools導入お助けサイトでは、
1. Vue.js devtoolsへGo&追加!
2. 、拡張機能の設定画面から、「ファイルのURLへのアクセスを許可する」にチェック!
3. 導入終了!デベロッパーツールのVueタブから使えるよ‼

みたいな書き方をしていると思いますが、私は↑で言うと3でVueタブが表示されませんでした。

どうしたのか

  1. デベロッパーツールの一番右上の「×」のひとつ左の「・が縦に三つ並んだやつ」からSettingsをクリック
  2. 一番下、DevToolsという項目の"Auto-open DevTools for popups"にチェック
  3. リロード
  4. 表示された