Vue.js devtools插件是一款常用的調(diào)試工具，可以幫助開發(fā)者在網(wǎng)頁(yè)端快速調(diào)試各種問題。該插件提供了多種功能和工具，幫助開發(fā)者更好地完成日常網(wǎng)頁(yè)開發(fā)任務(wù)，滿足用戶對(duì)于開發(fā)的需求。

Vue.js devtools插件

用于調(diào)試Vue.js應(yīng)用程序的瀏覽器DevTools擴(kuò)展。

用于調(diào)試Vue.js應(yīng)用程序的Chrome devtools擴(kuò)展。

功能特點(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)行交換。

軟件功能

你會(huì)在Chrome DevTools中得到兩個(gè)新標(biāo)簽。"?? Components "和"?? Profiler"。

組件標(biāo)簽顯示了在頁(yè)面上渲染的根React組件，以及它們最終渲染的子組件。

通過選擇樹中的一個(gè)組件，你可以在右邊的面板中檢查和編輯其當(dāng)前的道具和狀態(tài)。在面包屑中，你可以檢查所選的組件、創(chuàng)建它的組件、創(chuàng)建那個(gè)組件的組件，依此類推。

如果你使用常規(guī)的Elements標(biāo)簽檢查頁(yè)面上的一個(gè)React元素，然后切換到React標(biāo)簽，該元素將在React樹中被自動(dòng)選中。