我们在使用vue开发项目的时候，如果想要更好的审查和调试 vue 应用，可以使用官方推荐的Vue Devtools。

但是官方的方法比较麻烦，要使用npm编译，搞不好还会报好多莫名其妙的错误。

下面给大家提供一个简便的方法，不会再浪费大家宝贵的时间啦！

1.获取Vue Devtools插件

我已经将编译好的插件上传到博客里啦，可以免费下载->vue-devtools。也可github下载，见底部。

解压后得到一个 vender 文件夹，打开后目录结构如下

打开 manifest.json文件，找到 "persistent”，将它的值改成true

2.配置浏览器并安装

打开Chrome浏览器，找到 扩展程序

选择打开开发者模式

然后把 整个 vender 文件夹拖进浏览器窗口即可！一定是整个文件夹，少了一个文件都不行！丢进去之后看到如下界面，此时可以看到右上角多了一个扩展插件的图标

点击详细信息，下面这些都是默认勾选上的

3.测试

安装完后可以发现右上角的vue图标是灰色的，我们可以选择把它固定到浏览器上面

用浏览器打开一个 vue 项目， vue图标点亮，控制台多了一个vue调试窗口，则说明安装成功！

注意，普通项目下vue图标也是灰色的，这个扩展插件只有在vue项目下才可用！

博客资源审核太慢啦，已经传到github上了 vue-devtools ，github上克隆下来的文件名是vue-devtools，如果是通过git克隆得到的扩展插件，只需把上文提到的vender看作是vue-devtools，只是文件名不一样啦。