Vue.js devtools是一款chrome瀏覽器上的開發者調試插件,我們可以通過該軟件在瀏覽器開發者工具下調試代碼,支持用戶對DOM結構數據結構進行解析和調試功能,大大提高開發人員的調試效率。需要的朋友可以下載。
功能特點
1、性能
與路由選項卡一樣,性能選項卡也是一個新增功能。此選項卡由兩部分組成,“每秒幀數”和“組件渲染”。
第一個選項卡“每秒幀數”顯示一個實時源圖表,其中包含應用程序的當前fps。這可用于查找減慢應用程序速度的某些操作或組件。
2、設置
將顯示密度更改為更緊湊的布局
規范化組件名稱(my-component將變為MyComponent)
更新主題 - 打開或關閉新的黑暗主題選項
3、路由
Routing選項卡是devtools套件的全新選項。這里有兩個不同的視圖,“歷史記錄”和“路徑”,可以通過單擊“路由”選項卡標題進行交換。
安裝說明
1、下載得到vue.js devtools crx文件;
2、從設置-》更多工具-》擴展程序 打開擴展程序頁面,或者地址欄輸入 Chrome://extensions/ 按下回車打開擴展程序頁面;
3、打開擴展程序頁面的“開發者模式”;
4、將crx文件拖拽到擴展程序頁面,完成安裝;
用戶還可以通過Chrome擴展管理器找到已經安裝的插件,點擊在文件夾中顯示,雙擊“xxx.crx”。
5、將本地的vue項目跑起來后,在瀏覽器打開你的項目,打開開發者模式,你會看見地址欄下邊多出了vue選項。