この記事では、主に 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
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.devtoolsVue.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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
