一、前言
大家怕是都遇到過在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）重新啓動項目
就可以成功調試啦！
