首 頁(yè)
手機(jī)版

vue devtools插件 附使用教程

vue devtools是一個(gè)基于chrome瀏覽器的插件,用于調(diào)試Vue.js應(yīng)用程序,可以使得開(kāi)發(fā)人員大大提高調(diào)試效率。由于vue是數(shù)據(jù)驅(qū)動(dòng)的,所以這就存在在開(kāi)發(fā)調(diào)試中查看DOM結(jié)構(gòu)并不能解析出什么,通過(guò)該插件,用戶可以很輕松的對(duì)數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試,能夠在側(cè)邊欄窗格中的頁(yè)面中檢查代碼并進(jìn)行調(diào)試,可以方便查看state、mutaitons、action等信息,還可記錄路由的變化,以及路由相關(guān)信息等等,可謂是前端開(kāi)發(fā)必備工具呀,有需要的用戶快來(lái)下載體驗(yàn)吧。

vue devtools插件

vue devtools插件安裝教程:

1、首先在本站下載解壓,得到vue.js devtools crx文件;

2、若沒(méi)有還未安裝谷歌Chrome瀏覽器,請(qǐng)先在此下載安裝;

3、從設(shè)置->更多工具->擴(kuò)展程序 打開(kāi)擴(kuò)展程序頁(yè)面,或者地址欄輸入 Chrome://extensions/ 按下回車打開(kāi)擴(kuò)展程序頁(yè)面;

4、打開(kāi)擴(kuò)展程序頁(yè)面的“開(kāi)發(fā)者模式”;

5、將crx文件拖拽到擴(kuò)展程序頁(yè)面,完成安裝;

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

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

vue devtools使用教程

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

2、chrome瀏覽器按f12,即可看到vue菜單;

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

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

功能特點(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)

更新主題 - 打開(kāi)或關(guān)閉新的黑暗主題選項(xiàng)

3、路由

Routing選項(xiàng)卡是devtools套件的全新選項(xiàng)。這里有兩個(gè)不同的視圖,“歷史記錄”和“路徑”,可以通過(guò)單擊“路由”選項(xiàng)卡標(biāo)題進(jìn)行交換。

收起介紹展開(kāi)介紹
  • 下載地址
vue devtools插件 附使用教程

有問(wèn)題? 點(diǎn)此報(bào)錯(cuò)

發(fā)表評(píng)論

0條評(píng)論