Vue.js devtoolsが表示されない時のチェックポイント

20 Aug 2018

Vue.js devtools

チェック①
Vue.js devtools がインストールされているか

灯台下暗し。他人のPCだったり、最近PCを新調したりしていませんか。または、妖精さんの仕業で オフ になっていたりしませんか。Chrome本体のアップデートでセキュリティが強化されて安全のため自動的に停止されているなんて可能性はありそうです。

Vue.js devtools management

チェック②
Chrome Devtoolsを開くタイミング

対象のページを開いてから「ん?これどうなってるんだろう…」という流れで Chrome Devtools を後で開くとうまく表示されないことがあります。 ネットワークの通信状況を閲覧するときのように、Chrome Devtools を開いた状態にしてからページを読み込んでみましょう。

チェック③
開発モードになっているか

Vue.jsの実行コードがプロダクションモード(本番モード)になっていると、DevtoolsはVueアプリの構造を検出できません。

Vue.js devtools available or not

チェック④
キャッシュされていないか

キャッシュされたコードが読み込まれている可能性があります。 Networkタブにある Disable cache を有効にして再読込してみましょう。

Vue.js devtools disable cache

チェック⑤
Vue.jsライブラリ本体と実行コードを分けていないか

シングルページアプリケーション(SPA)であれば webpack 等で1ファイルにバンドルするのが通常ですが、状況によってはVue.jsライブラリ本体と実行コードを分けている場合があると思います。

このとき、必死に実行コード側を開発モード (mode=development) にしても、ライブラリ本体が本番モード (mode=production) になっていては開発ツールは有効になりません。

チェック⑥
他のページやアプリなら動作するのか

Vue.jsのオンラインドキュメントでは、開発モードもしくは内部構造の閲覧が許可された状態で公開されています。 このページで動作確認をしてみて、原因が開発中のアプリなのか拡張機能なのか切り分けてみましょう。

チェック⑦
それでもダメなとき

「以前は使えていたのに、急に使えなくなった!!」という時は、拡張機能自体を疑ってみます。 まずは拡張機能が最近更新されたかどうか、それがインストール中のものとバージョンが一致しているかどうかを確認します。バグなどがあれば GitHub の Issue で同じように困っている人がすでに報告していないかを見てみましょう。

Vue.js devtools chrome webstore

Vue.js devtools management

Vue.js devtools github issues


開発がんばってネ😇