使用vue-cli的同學肯定知道有一個Chrome調試工具——vue-devtool。但是在國內環境很難直接在Chrome商店下載得到，今天提供一個4.1.5版本的下載地址。
永久有效
鏈接：https://pan.baidu.com/s/1rVOMFXGl1A2nylH4Dv4Vvw
提取碼：w3nk
1.安裝
我們打開chrome的擴展程序，講剛下載的文件拖進去，就可以安裝了。
安裝
2.更改一些配置
首先打開chrome的開發者模式，然後允許vue-devtool在隱身模式使用，和允許訪問網址。
修改
修改
改好之後，還需要修改插件的一個配置，找到插件的安裝目錄，在chrome瀏覽器輸入：chrome:version
可以看到插件的目錄，打開之後
打開安裝目錄：
安裝目錄
注意，插件所在的那段長的文件夾名稱可以在打開開發模式之後找得到。
修改
終於找到安裝目錄之後，我們可以看到有個manifest.json文件。打開我們修改幾個地方。
修改
最後一步，我們把應用的vue.min.js改爲vue.js就可以使用了。
最後看一下插件的位置。
插件
3使用
使用vue-devtool可以查看vue組件裏面的data裏面的變量，methods裏面的函數，和一些全局對象比如說:$refs,$route，可以查看vuex裏面的變量及變化監聽。
查看
可以看到，我們通過搜索
priceProcess組件名稱，找到了該組件，點擊組件之後，看到了data，computed裏面的變量，並且得到了一個$vm0的vue對象，圖中我們也看到了vuex和event。我們試着查看和改變一些變量。
操作
可以看到，我們通過$vm0全局變量，成功操作了該組件定義的loading變量。通過該工具，可以很方便的調試我們的vue程序。