一種，下載資源，自己執(zhí)行命令制作插件包

1.下載Vue-Devtools資源vue-devtools,解壓后終端進(jìn)入到根目錄（cd + 文件夾根目錄路徑）

2.運(yùn)行npm install(前提安裝node和npm，一般node官網(wǎng)下載node安裝包安裝成功后npm也會安裝了)，因為網(wǎng)絡(luò)原因可能npm install時間較長或者不成功，可執(zhí)行npm install -g cnpm --registry=https://registry.npm.taobao.org換成淘寶鏡像，然后運(yùn)行cnpm -v確認(rèn)cnpm是否安裝成功

3.確認(rèn)安裝成功后再次運(yùn)行cnpm install，成功安裝所有依賴包后，執(zhí)行cnpm run build將該源碼打包成Chrome可使用的插件格式，生成的文件在當(dāng)前文件夾下shells/chrome目錄下

4.打開Chrome瀏覽器，地址欄輸入chrome://extensions打開擴(kuò)展程序頁或者command+,打開偏好設(shè)置頁找到左上角設(shè)置>擴(kuò)展程序打開擴(kuò)展程序頁，注意頁面右上角要勾選開發(fā)者模式，然后點(diǎn)擊加載已解壓的擴(kuò)展程序按鈕，選擇制作生成好的插件包即可，如下圖

截屏

二種，下載經(jīng)npm相關(guān)命令處理好的插件包

1.下載已經(jīng)經(jīng)過npm處理好的devtools工具Vue-Devtools-
2.打開Chrome瀏覽器，地址欄輸入chrome://extensions打開擴(kuò)展程序頁或者command+,打開偏好設(shè)置頁找到左上角設(shè)置>擴(kuò)展程序打開擴(kuò)展程序頁，注意頁面右上角要勾選開發(fā)者模式，然后點(diǎn)擊加載已解壓的擴(kuò)展程序按鈕，選擇下載的插件包即可，加載成功后當(dāng)前頁面會顯示Vue-Devtools插件

截屏