安装vue-devtools那些事儿

本文主要介绍 vue的调试工具 vue-devtools 的安装和使用

工欲善其事, 必先利其器, 快来用vue-devtools来调试开发你的vue项目吧

安装:

1.到github下载：

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

2.在vue-devtools目录下安装依赖包

cd vue-devtools npm install // 如果网速不好，可以用cnpm install 来代替 // 淘宝镜像安装 npm config set registry https://registry.npm.taobao.org

3.修改manifest.json文件

把"persistent":false改成true 4.编译代码

npm run build

记得一定要进行编译呦！

5.扩展Chrome插件 Chrome浏览器 > 更多工具 > 扩展程序 打开开发者模式，点击加载已解压的扩展程序 选择vue-devtools/packages/shell-chrome这个文件， 然而报错了 why？为什么会报错呢？ 分析原因，说明build/hook.js没有找到，那我们看一下 vue-devtools/packages/shell-chrome/manifest.json这个文件 截图如下： 看图会发现，在vue-devtools/packages/shell-chrome/manifest.json这个文件中引用的build/hook.js根本不存在，因为没有build这个文件夹，hook.js是放在src这个文件下面的，把manifest.json这个文件中的build改为src，npm run build ，再在chrome扩展程序中，打开开发者模式，点击加载已解压的扩展程序，就可以了。

截图如下： 6. vue-devtools使用 具体怎么使用，大家可以去百度一下。

可以直接去https://github.com/arcliang/Vue-Devtools-直接clone下来，直接使用。

温情提示: 1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的 2.安装后, 需要关闭浏览器, 再重新打开, 才能使用