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

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

安装: 

1. 到 github 下载：（！下载一定要记得是 master 主分支的代码，默认克隆后进入的是 dev 分支，执行 npm run build 会报错，执行 git checkout master 切换到 master 主分支）

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

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

3. 依赖包下载完后执行 npm run build, 编译打包成功后会在 shells 下生成 chrome 文件夹。此文件夹就是用来放入 chrome 的扩展程序。

npm run build

4. 扩展 Chrome 插件

打开 Chrome 浏览器 > 选择更多工具 > 扩展程序   > 打开开发者模式

点击加载已解压的扩展程序, 找到刚才生成的 chrome 文件夹，选择 vue-devtools > shells > chrome 放入, 安装成功如下图

 6. vue-devtools 使用

vue 项目, 打开 f12, 选择 vue 就可以使用了.

vue 是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

温馨提示：

推荐一个超级方便的下载 vue-devtools 插件的地址吧，再不用这么麻烦https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521，

下载拖拽到谷歌浏览器就行了

1. 下载插件

到收藏猫插件下载插件

https://chrome.pictureknow.com

并在浏览器提示中选择【保留】

2. 打开浏览器扩展安装页面

点击浏览器右上角⋮> 更多工具 > 点击扩展程序

3. 安装插件

在扩展中心打开右上角的【开发者模式】按钮，然后【刷新】页面，把下载好的 .crx 文件拖入扩展中心

是不是更简单啦；装成功了，可以来点个推荐哦 ！！！

付：Vue.js is detected on this page 的解决方法

有些安装好 vue-tools 插件后跑项目后发现还是用不了，调试不显示 vue 插件，点击浏览器上的 vue 插件的 V 图标就显示Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author.
综合了网上各种解决方案后，发现以下流程可以解决问题：

1、点击浏览器右上角三个点，选择更多工具→扩展程序，在 Vue.js devtools 下方的按钮中点击详情，进入以下页面

将“允许此扩展程序读取和更改您在所访问的网站上留存的所有数据：”改为“在所有网站上”，并将“允许访问文件网址”改为打开状态；

 2、在浏览器地址栏输入 chrome://version/ ，复制个人资料路径

 然后进入 \Extensions\nhdogjmejiglipccpnnnanhbledajbpd\6.1.4_0 路径，修改 manifest.json 中的 "persistent": false 为 "persistent": true；

 3、关闭浏览器所有窗口之后重新打开，就会发现 Vue devtools 扩展的图标变绿了，按 F12 也能看到 VUE 调试界面了。

 如还解决不了 , 看项目是否使用了 vue 的压缩版本，所以浏览器控制台默认不显示 vue 调试工具，可以在 index.html 中加个判断条件，开发环境时不使用压缩版本