Vue開發(fā)項(xiàng)目，自然少不了它的調(diào)試工具 vue-devtools 。這個(gè)非常好用，對(duì)vue開發(fā)者來說，這簡(jiǎn)直是福音。

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

幸運(yùn)的是，可以訪問國(guó)內(nèi)的插件站點(diǎn)進(jìn)行下載和安裝。

一、下載vue-devtools 插件工具

訪問插件網(wǎng)站：https://chrome.zzzmh.cn/#/search

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

進(jìn)入Vue Devtools詳情界面，點(diǎn)擊推薦下載：

二、安裝和配置插件

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

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

下圖是已經(jīng)安裝好的 vue-devtools 插件。

打開Vue.js Devtools擴(kuò)展程序的詳細(xì)信息，勾選選項(xiàng)—在所有網(wǎng)站上—允許訪問文件網(wǎng)址—收集各項(xiàng)錯(cuò)誤，如圖所示：

三、驗(yàn)證使用

可以參考下圖，在瀏覽器中對(duì)插件進(jìn)行固定顯示。

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

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