ホームページ > 記事 > ウェブフロントエンド > 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
保存後、コンパイルします:
重要なステップ 2. をチェックして、へのアクセスを許可します。ファイル URL
chrome://extensions/
」と入力して、Chrome 拡張機能を直接入力します。 一番上の 開発者モード
にチェックを入れ、「解凍した拡張機能をロード...」をクリックします。パスは vue-devtools-master/shells/chrome
です
ファイル URL へのアクセスを許可する
にチェックを入れます>
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 サイトの他の関連記事を参照してください。