安装vue调试工具vue-devtools（Edge和Chrome亲测成功）

一、克隆

由于github上clone太慢，遂将其拉到gitee中。下次使用的时候同步更新下就好。

git clone https://gitee.com/charliebarret/vue-devtools.git

二、安装

1、安装npm

网上有很多教程，这里不再赘述。建议做如下配置。

1、修改node.js默认的npm安装目录：

npm config set prefix "D:\toolkit\node_global"
npm config set cache "D:\toolkit\node_cache"

2、将D:\toolkit\node_global加入到系统PATH中
3、更换node.js的国内源

npm config set registry https://registry.npm.taobao.org
npm config get registry

2、安装vue-devtools

进入到项目根目录，进行以下步骤操作
1、安装cypress
切记必须首先安装cypress，否则极可能会安装失败。

cd vue-devtools
npm install cypress --save-dev

安装完成如图所示：

2、安装

npm install

完成如图：

3、修改manifest.json文件
进入项目根目录->shells->chrome文件夹下找到manifest.json，查找persistent，修改值为true

4、run build

npm run build

完成如图：

3、安装扩展

完成后在google内核的浏览器扩展栏部署插件，这里的例子是微软最新的浏览器Edge安装该扩展。

1、打开扩展页
如图所示，一定要打开“开发人员模式”和“允许来自其他应用商店的扩展”，然后点击“加载解压缩的扩展”，找到本地项目根目录下->shells->chrome文件夹打开。即安装成功。

2、安装成功如图：

3、安装好之后该插件会自动检测网页是否含有vue元素，如果有则会在F12打开调试面板看得到下图：