vue调试工具vue-devtools的安装和使用

本文主要介绍 vue的调试工具 vue-devtools 的安装和使用，以及自己入的坑，希望能帮助到大家。

一、安装

1、下载依赖包

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

之前直接下载依赖包，试了很多遍，执行编译代码 npm run build 时都会报错，最后在网上查了很多资料，看到有人说，直接下载的那个版本测试不成功，推荐使用 v4.1.5 和 v5.1.1，最后本人使用的是 v5.1.1，安装成功。

2、安装依赖包

 1. cd vue-devtools
 2. cnpm install或者npm install

3、修改manifest.json文件

把"persistent":false改成true

4、编译代码

npm run build

命令执行成功，控制台将出现如下结果：

5、添加到Chrome扩展插件

在浏览器输入地址 “chrome://extensions/” 进入扩展程序页面，打开开发者模式，点击加载已解压扩展程序，选择 vue-devtools>shells 下的 chrome文件夹。

二、vue-devtools使用

当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。