dev-tools安装使用踩坑

VUE的调试工具 dev-tools安装使用坑记录

1、到github下载dev-tools项目

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

2、下载安装依赖包

cd vue-devtools

npm install

3、修改manifest.json文件

看别人都是修改shells --> chrome --> manifest.json文件

我的项目中咋没有shells文件夹呢？一脸懵逼，原来是自己下载的分支不对，我下载的是dev分支。

一定要下载master版本！！！

ok，切换为master版本，重新 npm install

修改manifest.json文件中的 “persistent”：true

4、运行项目

npm run dev 

ok，测试没问题，可以使用了。

5、编译代码

npm run build

6、添加Chrome浏览器扩展程序

打开浏览器：chrome://extensions/

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入

7、dev-tools使用

打开vue的项目，会看到开发者工具多了一个vue，在这里我们就可以更加方便的查找bug啦。