1 介绍

vue-devtools是基于Chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码，非常方便。

2 安装步骤

2.1 下载vue-devtools源码

下载地址：

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

如下图所示：

使用git工具下载。
注意：这里不能直接clone上面的链接，因为我们git clone时默认分支为最新的develop分支。develop是测试分支，不是正式分支。如果使用develop分支，则在执行npm run build命令时会出错。所以需要更换分支，v5.1.1是可以正常使用的。
在git工具中使用下面的命令

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

2.2 下载第三方依赖

进入vue-devtools项目中，打开命令行，执行cnpm install，下载第三方依赖。

2.3 编译源程序

在vue-devtools项目中，打开命令行，执行npm run build，编译源程序。

2.4 修改manifest.json文件

build成功之后，vue-devtools项目的目录如下所示。

进入shells\chrome子目录，修改manifest.json文件

2.5 添加到Chrome浏览器中

确保开发者模式处于打开状态，如下所示。


出现如下图，则安装成功

3 注意事项

1、Vue.js必须引入开发版, 使用min压缩版是不能使用devtools进行调试的。
2、安装后, 需要关闭浏览器, 再重新打开, 才能使用
3、打开Vue项目时，才会出现Vue选项；正常情况下，没有Vue选项，其图标也是灰色