4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Vue.js】Vue.js devtoolsが表示出来ない時にみる

Posted at

vue.js備忘録、第二弾。
誰かの参考になれば幸いです。

Vue.js devtoolsとは

スクリーンショット 2020-08-24 22.38.12.png

Vueのデバッグを行う際に非常に便利な拡張機能です。
コンポーネント構造を直感的操作で確認出来て、プロパティーの中身も見る事が出来ます。

導入方法は非常に簡単でこちらからダウンロードしてくるだけです。

正しい動き

検証でデベロッパーツールを開き、Vueタブが表示されていればOK
スクリーンショット 2020-08-24 22.18.38.png

Vueタブが表示されないパターン①

「ファイルの URL へのアクセスを許可する」がオフになっている場合はオンにしてみましょ。
スクリーンショット 2020-08-24 22.26.44.png

Vueタブが表示されないパターン②

当たり前ですが、productionモードでは表示されないです。
開発モードで検証しましょう。
スクリーンショット 2020-08-24 22.31.41.png

Vueタブが表示されないパターン③

ここまで見てもVueタブが出てきてくれなかったら、キャッシュを疑いましょう。
NetworkタブのDisable cacheにチェックを入れて再読み込みして改善するか確認しましょう。

スクリーンショット 2020-08-24 22.35.32.png

これで大体解決出来るはずですm(__)m

4
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?