Vue で DevTools デバッグ ツールを使用する方法

この記事では、主に Vue DevTools デバッグ ツールの使用方法を紹介します。編集者は、これが非常に優れていると考えています。エディターをフォローして見てみましょう

現在、私は主に Vue.js テクノロジー スタックを使用して開発しています。問題はここにあります。 Vue DevTools をデバッグに使用する場合、Vue が検出されないというメッセージが表示されて使用できないことが多く、作業効率が一気に低下します。

インストール:

1. github からダウンロード:

git clone https://github.com/vuejs/vue-devtools

2. vue-devtools ディレクトリに依存関係パッケージをインストールします

cd vue-devtools

cnpm install

それでは、本題に取り掛かりましょう. こちらです。それを修正する方法。

まず、公式 Web サイト (https://github.com/vuejs/vue-devtools) から Vue DevTools をダウンロードします。

重要なステップ 1. persistent を変更します

ファイル vue-devtools/shells/chrome/manifest.json を見つけて、persistent を変更します> は true です。

persistent

找到文件vue-devtools/shells/chrome/manifest.json，修改persistent为true。

保存后，编译一下：

关键步骤二.勾选允许访问文件网址

上一步已经把Vue DevTools写好了，接下来是安装这个扩展。

打开Chrome，在地址栏输入chrome://extensions/，直接进入Chrome的扩展。

勾选最上方的开发者模式，再点击“加载已解压的扩展程序…”，路径为：vue-devtools-master/shells/chrome

勾选允许访问文件网址

关键步骤三.加入Vue文件中加入Vue.config.devtools

保存後、コンパイルします:

< img alt="" src="https://img.php.cn/upload/article/000/000/008/b3a3b2f7bf9d0ba16bc88ad960253f36-3.png"/>

重要なステップ 2. をチェックして、へのアクセスを許可します。ファイル URL

Vue DevTools は前のステップで記述されており、次のステップではこの拡張機能をインストールします。

Chrome を開き、アドレスバーに「chrome://extensions/」と入力して、Chrome 拡張機能を直接入力します。

一番上の 開発者モード にチェックを入れ、「解凍した拡張機能をロード...」をクリックします。パスは vue-devtools-master/shells/chrome です

< img alt="" src="https://img.php.cn/upload/article/000/000/008/b3a3b2f7bf9d0ba16bc88ad960253f36-4.png"/>

ファイル URL へのアクセスを許可するにチェックを入れます>

重要なステップ 3 を Vue ファイルに追加します < code>Vue.config.devtools

Vue.config.devtools = true; //这步很重要
new Vue({
 el: '#app',
 data: {
  a: 123,
 }
});

完了! 効果

Vue DevTools の改訂版をダウンロードします。 ダウンロード: vueDevTools (監視可能な改訂版).zip 上記は私がまとめたもので、将来的に皆さんのお役に立てれば幸いです。

関連記事:

vueでaxiosセカンダリカプセル化を実装する方法🎜🎜🎜🎜WeChatアプレットでオーディオコンポーネントを使用する方法🎜🎜🎜🎜ビデオコンポーネントを使用してWeChatアプレットでビデオを再生する方法🎜🎜🎜 🎜 WeChat アプレットにダウンロードの進行状況バーを実装する方法🎜🎜🎜🎜 JavaScript で携帯電話番号検証ツール PhoneUtils を使用する方法🎜🎜

以上がVue で DevTools デバッグ ツールを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。