Vue.js devtools是一款用于調(diào)試 Vue.js 應(yīng)用程序的 Chrome DevTools 擴(kuò)展。帶來初始 Vue 3 支持的主要重構(gòu)。歡迎需要此款插件的朋友前來下載使用。

注意 beta 通道可能會(huì)與穩(wěn)定版的 Vue devtools 發(fā)生沖突。如果 Vue 圖標(biāo)亮了但 Vue 選項(xiàng)卡沒有出現(xiàn)在 devtools 中，請(qǐng)暫時(shí)禁用穩(wěn)定版并重新打開頁面。

 Vue devtools 穩(wěn)定版插件：點(diǎn)擊下載

功能特點(diǎn)

1、性能
與路由選項(xiàng)卡一樣，性能選項(xiàng)卡也是一個(gè)新增功能。此選項(xiàng)卡由兩部分組成，“每秒幀數(shù)”和“組件渲染”。
第一個(gè)選項(xiàng)卡“每秒幀數(shù)”顯示一個(gè)實(shí)時(shí)源圖表，其中包含應(yīng)用程序的當(dāng)前fps。這可用于查找減慢應(yīng)用程序速度的某些操作或組件。
2、設(shè)置
將顯示密度更改為更緊湊的布局
規(guī)范化組件名稱（my-component將變?yōu)镸yComponent）
更新主題 - 打開或關(guān)閉新的黑暗主題選項(xiàng)
3、路由
Routing選項(xiàng)卡是devtools套件的全新選項(xiàng)。這里有兩個(gè)不同的視圖，“歷史記錄”和“路徑”，可以通過單擊“路由”選項(xiàng)卡標(biāo)題進(jìn)行交換。

安裝教程：

1、下載得到vue.js devtools crx文件；
2、從設(shè)置->更多工具->擴(kuò)展程序 打開擴(kuò)展程序頁面，或者地址欄輸入 Chrome://extensions/ 按下回車打開擴(kuò)展程序頁面；

3、打開擴(kuò)展程序頁面的“開發(fā)者模式”；

4、將crx文件拖拽到擴(kuò)展程序頁面，完成安裝；

用戶還可以通過Chrome擴(kuò)展管理器找到已經(jīng)安裝的插件，點(diǎn)擊在文件夾中顯示，雙擊“xxx.crx”

5、將本地的vue項(xiàng)目跑起來后，在瀏覽器打開你的項(xiàng)目，打開開發(fā)者模式，你會(huì)看見地址欄下邊多出了vue選項(xiàng)。

vue devtools使用教程

1、下載好后進(jìn)入vue-devtools-master工程 執(zhí)行cnpm install，下載依賴，然后執(zhí)行npm run build，編譯源程序
2、編譯完成后，目錄結(jié)構(gòu)如下

3、修改shells目錄下的mainifest.json 中的persistant為true
位置：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\ljjemllljcmogpfapbkkighbhhppjdbg\6.0.0.2_0

4、打開谷歌瀏覽器的設(shè)置--->擴(kuò)展程序，并勾選開發(fā)者模式，將剛剛編譯后的工程中的shells目錄下，chrome的整個(gè)文件夾直接拖拽到當(dāng)前瀏覽器中，并選擇啟用，即可將插件安裝到瀏覽器

5、打開一個(gè)已有的vue項(xiàng)目，我們以todolist項(xiàng)目為例，運(yùn)行項(xiàng)目，然后在瀏覽器中--->設(shè)置--->更多工具--->開發(fā)者工具，進(jìn)入調(diào)試模式

6、安裝完插件后，將會(huì)看到多了vue一欄，選擇vue，就可以在調(diào)試vue項(xiàng)目的過程中查看相應(yīng)的組件等