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,现在应用程序可以添加进去了。
参考文章: