Vue開發(fā)項目，自然少不了它的調試工具 vue-devtools 。這個非常好用，對vue開發(fā)者來說，這簡直是福音。

由于github和谷歌商店是外國網站等因素，訪問和下載都較慢，甚至還可能無法訪問，解決起來較麻煩。

幸運的是，可以訪問國內的插件站點進行下載和安裝。

一、下載vue-devtools 插件工具

訪問插件網站：https://chrome.zzzmh.cn/#/search

在搜索框搜索vue，選擇需要下載的版本Vue Devtools，如圖所示：

進入Vue Devtools詳情界面，點擊推薦下載：

二、安裝和配置插件

下載好壓縮包后進行解壓縮。打開Google Chrome瀏覽器，點擊控制菜單欄->更多工具->擴展程序。

開啟開發(fā)者模式，打開解壓完畢的文件夾，拖拽.CRX文件到頁面空白部分，確認添加Vue.js Devtools擴展程序，如圖所示：

下圖是已經安裝好的 vue-devtools 插件。

打開Vue.js Devtools擴展程序的詳細信息，勾選選項—在所有網站上—允許訪問文件網址—收集各項錯誤，如圖所示：

三、驗證使用

可以參考下圖，在瀏覽器中對插件進行固定顯示。

使用了Vue框架的界面的Vue-Devtools插件的logo才會亮起，否則是灰色的，如圖所示：

按F12打開開發(fā)者工具，如圖所示：