Chrome デベロッパーツール で Vue のタブが出ないときの対処方法

結論

vue.js をダウンロードしてきて、直接読み込みましょう*1。

<script src="vue.js"></script>

だめだったこと

• CDN（もちろんだめ）
• vue.min.js を読み込んで Vue.config.devtools = true; を書き加えた
  • この場合、拡張機能のアイコンをクリックした際に「Vue のタブをさっそく見てみましょう」的なメッセージ（以下のような）が出てくるが、実際には Vue のタブは出てこない

You are probably using Vue from CDN, and probably using a production build (dist/vue.min.js). Either replace it with a dev build (dist/vue.js) or add Vue.config.devtools = true to the main js file.

理由

それでも出ないとき

私の例ですと、特定のバージョンの Chrome ではどうやっても出なかったところ、Firefox では何ら問題なく出た、ということもありました。ご参考までに。

*1:こういう原始的な方法なので開発環境によっては解決にならないかもしれません