一、前言
大家怕是都遇到过在Chrome里面查看Elements元素时，监测不到Element元素的数据变化的问题。
由于vue是数据驱动页面渲染的，所以必须要进行对数据动向的监测。
下面我会一步一步的教大家来执行，包括里面不少的坑...
二、安装
首先我们来安装Vue-devtools，有两种方式：
（1）最简单的是在谷歌商店中下载，地址给大家贴出来：
https://chrome.google.com/webstore/search/Vue.js%20devtools?hl=zh-CN
下载第一个就好，这是Vue官方提供的
（2）使用git下载
1. 在github上下载压缩包，github下载地址：https://github.com/vuejs/vue-devtools
2. 解压到本地的某盘
3. 用你的cnpm进入该文件夹下，执行下面命令：
cnpm install
cnpm run build
三、这里你会遇到第一个坑
安装好Vue-devtools插件，输入cnpm run dev跑起你的本地项目，右上角的小角标就会亮起。
但是你会发现控制台中并没有Vue的Tab项，并且会报下面的错误，翻译过来如下：
Devtools插件是不可用的，因为它是在生产模式或显式禁用的。
（1）解决生产模式问题
webpack.config.js
（2）解决显式禁用问题
修改Vue-devtools插件中的 manifest.json文件，将persistent改为 true即可
1.获取插件id
进入Chrome扩展程序页面： chrome://extensions/ ，复制id
2.找到Vue-devtools插件存储的位置
1⃣️ windows:
文件资源管理器中，直接搜索插件ID，找到里面的manifest.json
2⃣️ mac:
访达中直接搜索插件ID，找到里面的manifest.json
3.修改显式禁用
四、接下来是最后一个坑
如果此时你的控制台中，还没有Vue的Tab页，左键单击图标，你发现会弹出如下提示：
这个问题，是因为没有在main.js中开启debug mode！！我们在main.js中开启就ok啦。
（1）修改main.js
import Vue from 'vue'
Vue.config.devtools = true
（2）重新启动项目
就可以成功调试啦！
