vue devtools是一款可用于調(diào)試Vue.js應(yīng)用程序的chrome
瀏覽器插件。它內(nèi)嵌在chrome瀏覽器中使用，通過使用這款插件，用戶能夠輕松對vue數(shù)據(jù)結(jié)構(gòu)進行解析和調(diào)試，并且能夠在側(cè)邊欄窗格中的頁面中檢查代碼并進行調(diào)試，這樣的話，用戶就不需要在桌面單獨運行打開相關(guān)代碼程序軟件，使用瀏覽器的這個插件就可以檢查代碼語法錯誤以及語句重復(fù)等問題，并可以對其進行糾正調(diào)試。
vue devtools插件可以方便查看state、mutaitons、action等信息，除此之外，還可以記錄路由的變化以及路由相關(guān)信息等等，從多方面節(jié)省用戶寶貴的時間，大大提高工作效率，它是前端開發(fā)必備工具，可以大大提高程序開發(fā)人員調(diào)試效率。需要的用戶朋友們快來這里免費下載體驗吧，能夠滿足你的所有使用需求。
安裝教程
1、下載并解壓文件包，得到插件，如下圖所示：
2、在安裝vue devtools插件之前，要確保你安裝了谷歌Chrome瀏覽器
3、從設(shè)置->更多工具->擴展程序 打開擴展程序頁面，或者地址欄輸入 Chrome://extensions/ 按下回車打開擴展程序頁面
4、打開擴展程序頁面的“開發(fā)者模式”
5、將Vue.js Devtools_5.0.0.crx文件拖拽到擴展程序頁面，完成安裝
若出現(xiàn)”CRX-HEADER-INVALID”無效情況，解決方法請參考收藏貓插件
6、將本地的vue項目跑起來后，在瀏覽器打開你的項目，打開開發(fā)者模式，你會看見地址欄下邊多出了vue選項
功能特色
1、性能
vue devtools性能選項卡與路由選項卡一樣，性能選項卡也是一個新增功能。此選項卡由兩部分組成，“每秒幀數(shù)”和“組件渲染”。
第一個選項卡“每秒幀數(shù)”顯示一個實時源圖表，其中包含應(yīng)用程序的當(dāng)前fps。這可用于查找減慢應(yīng)用程序速度的某些操作或組件。
2、設(shè)置
將顯示密度更改為更緊湊的布局
規(guī)范化組件名稱（my-component將變?yōu)镸yComponent）
更新主題 - 打開或關(guān)閉新的黑暗主題選項
3、路由
Routing選項卡是devtools套件的全新選項。這里有兩個不同的視圖，“歷史記錄”和“路徑”，可以通過單擊“路由”選項卡標(biāo)題進行交換。
使用教程
1、在使用之前必須對vue項目進行相關(guān)設(shè)置，打開shells>chrome>src>manifest.json并把json文件里的"persistent":false改成true
2、chrome瀏覽器按f12，即可看到vue菜單
3、點擊vue菜單，即可看到左側(cè)組件嵌套情況，右側(cè)則可選擇查看組件，vuex數(shù)據(jù)倉庫,事件派發(fā)情況，vue-router，工具設(shè)置等等
4、點擊某個組件，還可以看到該組件對應(yīng)的真實dom，傳入的props、data等
0條評論