早些時候發佈了Vue devtools 5.0beta版，爲已經調試過的強大工具帶來了驚人的新功能。一些新功能包括性能分析，路線跟蹤，Vuex store的實時編輯以及新的設置面板。這些新的功能我覺得是肯定會出來的，在使用它們幾周後，我分享一下對我們最直觀感受的東西。讓我們來了解一些新功能和在使用它們在調試過程中的新見解。
路由
Routing選項卡是devtools套件的全新選項。這裏有兩個不同的視圖，“歷史記錄”和“路徑”，可以通過單擊“路由”選項卡標題進行交換。如果您在應用程序中使用vue-router，這些都會提供有用的信息。
歷史視圖有兩個面板。左側面板顯示已經前往的路線的歷史記錄。單擊其中一個歷史記錄條目將在右側面板中顯示該路徑更改的詳細信息。這些詳細信息顯示用戶導航和導航的路線，以及任何伴隨的路線參數。
路由視圖還有兩個面板，左側面板顯示應用程序中所有路徑的映射。單擊其中一條路線將在右側面板中顯示其詳細信息。此處的詳細信息與上一個視圖略有不同，而是顯示路徑，任何子項（嵌套）路由和任何路由參數。
Vuex
Vuex已經是老功能了，但它有一個驚人的新功能; 您現在可以從devtools更新應用程序狀態！
這個功能一直期待已久。在更新之前，改變狀態的過程要繁瑣得多。您必須重新給一個真確的的Mutation以獲得您想要的狀態，或者您必須手動更新Vuex模塊文件中的默認值。現在，您只需單擊任何狀態值，然後從那裏更新或刪除。此外，您甚至可以在現有對象上添加新屬性！
性能
與路由選項卡一樣，性能選項卡也是一個新增功能。此選項卡由兩部分組成，“每秒幀數”和“組件渲染”。
第一個選項卡“每秒幀數”顯示一個實時源圖表，其中包含應用程序的當前fps。這可用於查找減慢應用程序速度的某些操作或組件。
在下圖中，您可以看到圖表中的第一個紅色凹陷在其頂部有“M”，“E”和“R”圖標。“M”表示發生Mutation，“E”表示事件被觸發，“R”表示路徑發生變化。我們可以預判應用程序的fps會暫時降低路徑變化，但如果這是意外下降，那我們更加容易查出哪些組件消耗了比較多的資源。
“Component Render”選項卡的第二張圖片顯示了組件生命週期方法的詳細運行時間統計信息。左窗格顯示組件的總渲染時間，而右窗格按生命週期方法提供細分。任何極慢的組件都會在這個左側標籤中脫穎而出，這再次爲調查性能問題提供了一個良好的起點。
設置
最後但並非最不重要的是，有一個新的設置菜單！目前，此菜單包括以下選項：
將顯示密度更改爲更緊湊的佈局
規範化組件名稱（my-component將變爲MyComponent）
更新主題 - 打開或關閉新的黑暗主題選項
結論
Vue核心團隊及其社區再一次提供了令人驚歎的開發人員工具體驗。Vue devtools一直是開發人員體驗中不可或缺的一部分，而且這次更新是朝着正確方向發展的巨大推動力。此版本的devtools與最近發佈的vue-cli GUI相結合，提供了從創建到完成，令人驚訝的開發體驗。