Vue のデバッグツール vue-devtools について (詳細なチュートリアル)-jsチュートリアル-php.cn

Vue のデバッグツール vue-devtools について (詳細なチュートリアル)

亚连

リリース： 2018-06-21 11:52:19

オリジナル

4685 人が閲覧しました

この記事では主に、Vue のデバッグアーティファクトである vue-devtools のインストール方法を紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして一緒に見てみましょう

vue-devtoolsとは何ですか?

vue-devtools は、Chrome ブラウザーに基づいたプラグインで、vue アプリケーションのデバッグに使用され、デバッグ効率を大幅に向上させることができます。次にvue-devtoolsのインストールを紹介します。

インストール方法

1. Chromeストアから直接インストール:

vue-devtoolsはChromeストアから直接ダウンロードしてインストールできます。非常に簡単なので、ここでは詳しく紹介しません。ただし、注意すべき点が 1 つあります。それは、ダウンロードするには壁を回避する必要があるということです。

2. 手動インストール:

ステップ 1: vue-devtools の github プロジェクトを見つけてローカルに複製します

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

ログイン後にコピー

ステップ 2: プロジェクトに必要な npm パッケージをインストールします

npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install

ログイン後にコピー

3 番目のステップ:プロジェクトファイル

npm run build

ログイン後にコピー

ステップ4: Chromeブラウザに追加します

ブラウザにアドレス「chrome://extensions/」を入力して拡張機能ページに入り、「解凍した拡張機能をロード...」ボタンをクリックして、 vue -chrome フォルダーは、devtools>shells の下にあります。

/**
*「解凍した拡張機能をロード…」ボタンが表示されない場合は、「開発者モード」にチェックを入れる必要があります。
*/

追加が完了しました。レンダリングは次のようになります:

結論: vue-devtoolsの使い方

vueの追加が完了したら-devtools extension 後で、vue アプリケーションをデバッグすると、Chrome 開発者ツールに vue 列が表示され、これをクリックすると、現在のページに vue オブジェクトに関する情報が表示されます。 vue-devtools は比較的簡単に使用でき、簡単に開始できます。詳しい使用手順は次のとおりです。