Vue.js devtoolsが表示されない時のチェックポイント
チェック①
Vue.js devtools がインストールされているか
灯台下暗し。他人のPCだったり、最近PCを新調したりしていませんか。または、妖精さんの仕業で オフ になっていたりしませんか。Chrome本体のアップデートでセキュリティが強化されて安全のため自動的に停止されているなんて可能性はありそうです。
チェック②
Chrome Devtoolsを開くタイミング
対象のページを開いてから「ん？これどうなってるんだろう…」という流れで Chrome Devtools を後で開くとうまく表示されないことがあります。 ネットワークの通信状況を閲覧するときのように、Chrome Devtools を開いた状態にしてからページを読み込んでみましょう。
チェック③
開発モードになっているか
Vue.jsの実行コードがプロダクションモード（本番モード）になっていると、DevtoolsはVueアプリの構造を検出できません。
チェック④
キャッシュされていないか
キャッシュされたコードが読み込まれている可能性があります。 Networkタブにある Disable cache を有効にして再読込してみましょう。
チェック⑤
Vue.jsライブラリ本体と実行コードを分けていないか
シングルページアプリケーション（SPA）であれば webpack 等で１ファイルにバンドルするのが通常ですが、状況によってはVue.jsライブラリ本体と実行コードを分けている場合があると思います。
このとき、必死に実行コード側を開発モード (mode=development) にしても、ライブラリ本体が本番モード (mode=production) になっていては開発ツールは有効になりません。
チェック⑥
他のページやアプリなら動作するのか
Vue.jsのオンラインドキュメントでは、開発モードもしくは内部構造の閲覧が許可された状態で公開されています。 このページで動作確認をしてみて、原因が開発中のアプリなのか拡張機能なのか切り分けてみましょう。
チェック⑦ ※2020年6月追加
Chrome DevToolsの再読込
Vueが適切に検出されているのに表示されない、またはChrome DevToolsのパネル（タブ）に、Vueだけでなく他の拡張機能のものも表示されていない場合、これで解決する見込みがあります。
Chrome DevToolsの右上にあるギア⚙のアイコンから、Chrome DevTools自体の設定画面を開きます。 開いた状態で選択されている Preferences にある Appearance 項目の Theme の選択肢を、現在のものとは別のものに一旦切り替えます。 そうすると、Chrome DevToolsは描画に必要な要素を再認識し、Vueのパネルも復活するという対処方法です。必要に応じて、切り替えた設定をもとに戻しておきましょう。
チェック⑧
それでもダメなとき
「以前は使えていたのに、急に使えなくなった！！」という時は、拡張機能自体を疑ってみます。 まずは拡張機能が最近更新されたかどうか、それがインストール中のものとバージョンが一致しているかどうかを確認します。バグなどがあれば GitHub の Issue で同じように困っている人がすでに報告していないかを見てみましょう。
開発がんばってネ😇