Vue.js devtools插件是一款常用的調試工具，可以幫助開發者在網頁端快速調試各種問題。該插件提供了多種功能和工具，幫助開發者更好地完成日常網頁開發任務，滿足用戶對于開發的需求。

Vue.js devtools插件

用于調試Vue.js應用程序的瀏覽器DevTools擴展。

用于調試Vue.js應用程序的Chrome devtools擴展。

功能特點

1、性能

與路由選項卡一樣，性能選項卡也是一個新增功能。此選項卡由兩部分組成，“每秒幀數”和“組件渲染”。

第一個選項卡“每秒幀數”顯示一個實時源圖表，其中包含應用程序的當前fps。這可用于查找減慢應用程序速度的某些操作或組件。

2、設置

將顯示密度更改為更緊湊的布局

規范化組件名稱(my-component將變為MyComponent)

更新主題 - 打開或關閉新的黑暗主題選項

3、路由

Routing選項卡是devtools套件的全新選項。這里有兩個不同的視圖，“歷史記錄”和“路徑”，可以通過單擊“路由”選項卡標題進行交換。

軟件功能

你會在Chrome DevTools中得到兩個新標簽。"?? Components "和"?? Profiler"。

組件標簽顯示了在頁面上渲染的根React組件，以及它們最終渲染的子組件。

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

如果你使用常規的Elements標簽檢查頁面上的一個React元素，然后切換到React標簽，該元素將在React樹中被自動選中。