web-dev-qa-db-ja.com

VueJs開発ツールパネルが表示されない

アプリケーションで vue dev-tools の使用を開始しましたが、Chromeの開発者モードでは表示されません。 dev-toolsのgithubページやWeb上の他の場所にあるさまざまな解決策を試しましたが、うまくいきませんでした。以下は、表示するために私が行った/試みたものです。

  1. chrome拡張機能でallow access to file URL’s optionを有効にしました
  2. 新しいVue（{}）の直前にVue.config.debug = true;Vue.config.devtools = true;を追加しました
  3. VueJSファイルの非縮小バージョンを追加
  4. また、Chrome最新バージョン：55.0.2883.87を使用しています。

chrome extension をクリックすると、次のメッセージが表示されます。enter image description here

パネルが実際に表示されていない場合を除きます。

誰かがこれに対する解決策を持っていますか？ありがとう。

vuejs2vue.jsvue-resource
17
Malik

Vueアイコンをメニューバーでアクティブにすることはできませんでしたが、Vueタブを表示してChrome開発者ツール。以下を試してください：

  • Chrome開発者ツールウィンドウを閉じる
  • ブラウザをハードリフレッシュする
  • 開発者ツールウィンドウを再度開き、Vueタブを探します

ツールバーのアイコンは、それでもVueを検出できないことを示している可能性がありますが、タブはChrome開発者ツールに表示されるはずです。

24
Daryn

これと同じ問題があり、縮小化されたvue from cdn "vue.min.js"を使用していました。次に、それを削除し、縮小化されていないvueを使用しました。次に、ブラウザーを再ロードし、コンソールとvueタブがありました。

10
Romy Gomes

また、今日、広告ブロッカーがインストールされている場合、Vue Devtoolsが正常に実行されないように停止します。

4
Steven Grant

ファイルタブを閉じて再度開くとうまくいきました。

2
Bhoomika Chauhan

  • Google Chromeを何度も再起動する

  • 最小ファイルを使用しない

  • 新しい前に追加vueインスタンス化：

    Vue.config.devtools = true;
2
Wilfried Kakou

「ハードリロード」を数回実行するだけです。 Windowsの場合：Shift + F5。 Macの場合：CMD + SHIFT + R.

1
user6023290

私にとっては、ローカルのHTMLファイルを実行していました。デフォルトでは、Chromeは拡張機能がローカルファイルで作業することをブロックします。

  • 3ドットメニュー->その他のツール->拡張機能

  • Vue拡張子を見つけ、詳細をクリックして、[ファイルのURLへのアクセスを許可する：

スクリーンショット

1
swiftB3

本番用CDNを使用しないようにしてください。私にとってそれを機能させる唯一の方法は、VueJS開発バージョンを使用することです。

開発： vue.js

0
Mohamed Salem Lamiri

ハードリロードを実行して開発コンソールを閉じ、再度開きます。

0
thavorac

これは定期的に私に起こり、原因がないように思われるのでかなり迷惑です。

  • Chromeブラウザ拡張機能に移動します
  • Vue DevTools拡張機能を削除します
  • もう一度追加してください
  • ページをハードリフレッシュ

Chrome-バージョン71.0.3578.98

MacOS Mojave 10.14

VueJS 2.5.21

0
Eric Prostko