一、爲什麼要使用vue-devtools
由於用vue腳手架寫的源代碼，運行時，先經過webpack打包，打包後的結果和我們的源代碼不一樣，所以，沒法調試程序，沒法看的數據的變化，在google中調試非常費勁。Vue-devtools工具是專門爲vue項目使用過程中設計的調試工具。有了這個工具，就可以在google瀏覽器的控制檯裏看到當前組件的模板結構和data。如下圖所示(左邊是當前組件裏的所有結構，右邊是你選擇的組件的數據)：
二、如何安裝使用（不能翻牆的情況下）：
1、下載vue-devtools。在github上：
https://github.com/vuejs/vue-devtools
2、解壓後，
3、用npm i 安裝項目的所有依賴
4、用編輯工具打開項目
5、找到 shells目錄下chrome下的mainfest.json
6、修改persistent 的值爲true
7、用npm run build打包（在命令行運行npm run build）
8、進入google瀏覽器，安裝插件：
9、點擊“加載已解壓的擴展程序”
10、選擇shells下的chrome目錄。點擊“選擇文件夾”按鈕
11、出現了vue-devtools插件
12、大功告成，這時候在瀏覽器的控制就會看到的vue 選項
13、使用
運行vue的程序後，在左邊點擊，在右邊就能看到該組件的相關數據：
