安装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.安装后, 需要关闭浏览器, 再重新打开, 才能使用