深入瞭解最新的Vue Devtools v5.0

早些時候釋出了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相結合，提供了從建立到完成，令人驚訝的開發體驗。

下載地址

Chrome官方地址(需自備梯子)