Vue.js devtools V5.1.1

Vue.js devtools の crx ファイルをダウンロードした後、Chrome の拡張機能ページ (chrome://extensions/ または Chrome メニュー アイコン > [その他のツール] > [拡張機能の検索] を押します) を開き、crx ファイルを拡張機能ページにドラッグ アンド ドロップします。インストールします。
4. [拡張機能を追加] をクリックしてインストールを完了します。

5. Vue.js devtool プラグインはインストール後に使用できず、「vue.js が検出されません」というプロンプトが表示されます現時点では、次のメソッドを使用できます:

まず、Vue.js devtool プラグのインストール ディレクトリを見つける必要があります。 -で。 (プラグインのインストール場所がどうしても見つからない場合は、ローカル コンピューターでプラグイン ID を検索できます: nhdogjmejiglipccpnnnanhbledajbpd。) Chrome プラグインのインストール場所は、オペレーティング システムによって異なります。たとえば、Win8 システムの Chrome プラグインのインストール場所: C:\Users\Administrator\ AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd
次に、インストール ディレクトリを見つけた後、 Vue.js devtool プラグインの mainifest.json ファイルを開きます (これがキーです)。

mainfest.json のコードpersistent: falseをpersistent: trueに変更します。以下に示すように:

通常の状況では、上記の場所のコードを変更します。 vue プロジェクトを開いた後、コンソールで vue を選択すると、正常に使用できるようになります。

第三に、上記の方法で調整してもまだ使用できない場合は、次の図に示すように webpack.config.js のコードを調整できます。 : < /p>

最後に、vue プロジェクトを再起動すると、使用できるようになります。

2. ソース コードのインストール方法

1. devtools ソース コードを github のアドレスからダウンロードします: https: // github.com/vuejs/vue-devtools.

2. ダウンロード後、vue-devtools-master プロジェクトに入り、cnpm install を実行して依存関係をダウンロードし、npm run build を実行してソース プログラムをコンパイルします。

3. コンパイルが完了すると、ディレクトリ構造は次のようになります。

次の mainifest.json の永続化を変更します。 shells-chrome ディレクトリは true です:

4. Google Chrome の設定を開き、[拡張機能] を開き、開発者モードを確認します。

次に、コンパイルしたばかりのプロジェクトのシェル ディレクトリにある chrome フォルダー全体を現在のブラウザに直接ドラッグ アンド ドロップし、ブラウザにプラグインのインストールを有効にするを選択します。

5. 既存の vue プロジェクトを開いてプロジェクトを実行し、ブラウザで --->設定 --->その他のツール --->開発者ツール、デバッグ モードに入ります:
vue.js が検出されないことがわかりました。webpack.config.js のコードを調整できます:


最後に、vue プロジェクトを再起動すると、使用できるようになります。

概要: Vue.js devtool プラグインをインストールした後、「vue.js が検出されない」という問題が表示されます。まず、拡張機能で開発者モードを選択し、Vue.js devtool プラグインのインストール ディレクトリを開きますプラグインを変更し、mainifest.json の永続化を true に変更します。それでも動作しない場合は、webpack.config.js のコードを調整し、最後に vue プロジェクトを再起動して使用します。