Vue Debug Artifact Vue-devtools installation

This is a creation in Article, where the information may have evolved or changed.

Objective

Vue-devtools is a chrome-based browser plugin for debugging Vue applications, which can greatly improve our debugging efficiency. Next we will introduce the installation of Vue-devtools.

Chrome Store installs directly

Vue-devtools can be downloaded and installed directly from the chrome store, which is very simple and not too much to introduce here. But one thing to note is that you need to flip the wall to download it.

Manual Installation

The first step: Find Vue-devtools's GitHub project and clone it locally. Vue-devtools

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

Step Two: Install the NPM package required for the project

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

Step three: Compile the project file

npm run build

Fourth step: Add to Chrome Explorer

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹。/***如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。*/

To do this, add the following:

Epilogue: How to use Vue-devtools

After we've added the vue-devtools extension, when we debug the Vue app, we'll look at a vue column in the Chrome Developer tool and then click to see some information about the Vue object on the current page. Vue-devtools is still relatively simple to use, easy to get started with, here is a detailed description of its use.