chrome浏览器插件之 vue-devtools

chrome浏览器插件之 vue-devtools

用vue编写项目的时候，打开开发者工具，找到Sources,发现调试js文件比较方便，调试vue文件会出现下面这种情况

这时可以安装vue-devtools插件来调试vue代码

安装步骤

1.可以通过链接https://github.com/vuejs/vue-devtools下载vue-devtools工具，然后本地npm install , npm run buld进行编译。

由于我本地npm run build 一直报错，好像是webpack和webpack-cli版本不兼容，后来解决这个兼容问题还是报错

2.后来看到可以直接在本地安装npm install vue-devtools 插件

然后在node-moudles中找到vender文件

点开vender文件，找到manifest.json文件，修改里面的persisten为true，保存

参考博客：https://blog.csdn.net/danni_he/article/details/108051764

3.把vender文件引入chrome浏览器的扩展程序中

找到> 更多工具 > 扩展程序  页面

点击开发者模式

然后找到刚才vender所在的目录，加载到这个页面即可使用

4.vue-devtools调试工具使用

启动本地项目，打开开发者工具，头部会出现vue标识，点进去即可调试。