vue devtools是一款基于chrome瀏覽器的用于調(diào)試Vue.js應(yīng)用程序的插件，可以使得開發(fā)人員大大提高調(diào)試效率。支持用戶對DOM結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試功能。需要的朋友可下載試試！

由于vue是數(shù)據(jù)驅(qū)動(dòng)的，所以這就存在在開發(fā)調(diào)試中查看DOM結(jié)構(gòu)并不能解析出什么，通過該插件，用戶可以很輕松的對數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試，能夠在側(cè)邊欄窗格中的頁面中檢查代碼并進(jìn)行調(diào)試，可以方便查看state、mutaitons、action等信息，還可記錄路由的變化，以及路由相關(guān)信息等等，可謂是前端開發(fā)必備工具！

vue.js devtools(chrome瀏覽器調(diào)試插件) v6.6.1 免費(fèi)版(附使用教程)

• 類型：其它
• 大?。?/span>1.95MB
• 語言：簡體中文
• 時(shí)間：2024-02-26

查看詳情

安裝教程：

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

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

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

若出現(xiàn)”CRX-HEADER-INVALID”無效情況，解決方法請參考收藏貓插件

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

vue devtools使用教程

1、在使用之前必須對vue項(xiàng)目進(jìn)行相關(guān)設(shè)置，打開shells>chrome>src>manifest.json并把json文件里的"persistent":false改成true；

2、chrome瀏覽器按f12，即可看到vue菜單；

3、點(diǎn)擊vue菜單，即可看到左側(cè)組件嵌套情況，右側(cè)則可選擇查看組件，vuex數(shù)據(jù)倉庫,事件派發(fā)情況，vue-router，工具設(shè)置等等；

點(diǎn)擊某個(gè)組件，還可以看到該組件對應(yīng)的真實(shí)dom，傳入的props、data等；

以上就是小編整理的關(guān)于Chrome瀏覽器插件vue.js devtools的安裝方法及使用教程，希望對大家有所幫助，僅供參考！歡迎繼續(xù)關(guān)注腳本之家其他軟件教程資訊！

最新評論