安装 Vue Devtools

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。

1）首先在github下载devtools源码，地址：https://github.com/vuejs/vue-devtools

2）下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖，然后执行npm run build，编译源程序。

3）修改manifest.json文件把"persistent":false改成true

npm run build

如果报错如下：

说明要安装webpack

npm install webpack -g

4）添加至chrome游览器

游览器输入地址“chrome://extensions/”进入扩展程序页面，将文件夹拖入浏览器即可

安装成功后开启项目后再控制台中会有如下显示。 

 

遇到问题：

1.添加扩展程序时报错：xxxx目录xxxx，无法为内容脚本加载 JavaScript“build/hook.js”

打开目录发现这些hook.js文件等应该是在安装里的src文件夹里的（比照上文正确有效安装的目录也可以看到），然后我把json文件里的标红的"build"全改成了"src"或者把src文件夹重命名为了build，现在应用程序可以添加进去了。

参考文章：

https://blog.csdn.net/qq_43533416/article/details/101639772