[譯] 深度介紹 Vue DevTools 5.0 新特性

原文：Deep Dive Into The New Vue Devtools v5.0
做者：Brandon Lyons 發表時間：Oct 5, 2018
譯者：西樓聽雨 發表時間： 2018/10/10 (轉載請註明出處)

譯註：下面這段爲原文的開頭語，除了「Vue DevTools 5.0 是這個月月初發布的」這個信息外，沒什麼有用的信息，暫不翻譯，請直接看下文的乾貨。

Earlier this month the Vue devtools version 5.0 beta was released, bringing amazing new features to the already debugging powerful tool. Some of the new features include performance profiling, route tracking, live editing the Vuex store, and a new settings panel. These new components have been anticipated for a while, and after getting a chance to use them for a couple weeks I wanted to share what I found to be the most helpful. Lets go through some of the new features that were added, and look at what new insights they add into the debugging process.

Routing 標籤

Routing 標籤頁是 Vue 開發者工具中的一個全新的標籤頁。它有兩種不一樣的視圖——「History」和「Routes」，能夠經過點擊標籤頭來切換。若是你有在你的應用中用到 vue-router 的話，這兩個視圖能夠提供許多有用的信息。

History 視圖中有兩塊面板，左側的面板展現的是路由的歷史記錄，點擊任意一條記錄，將在右側面板中展現出它的變更詳情。這些詳情包括了用戶此次導航的起點路由 (from) 和終點路由 (to)，以及相關的路由參數(指實參——譯註)。

Routing 視圖中也有兩塊面板，左側面板展現的是應用中全部的路由配置，點擊任意一條，將在右側面板中展現出它的詳情。這些詳情和 History 視圖中的不同，顯示的是路由的路徑 (path) 、參數 (指形參——譯註)，及其子路由 (也叫作「嵌套路由」)。

Vuex 標籤

Vuex 標籤雖然不是新的標籤，但此次它卻有一個超棒的新特性——如今你能夠直接在這裏修改應用程序的狀態了。

這是一個等待已久的特性。在這以前，要修改狀態，過程是很是繁瑣的——要麼你須要手動觸發相應的 mutation，要麼你必須手動修改 Vuex 模塊文件中的默認值；而如今你只須要點擊任意一個狀態的值，而後直接在那裏修改或者刪除它就能夠了，你甚至還能夠在這些現有的對象上添加新的屬性。

Performance 標籤

和 Routing 標籤同樣，Performance 標籤也是一個新的標籤。這個標籤的標籤頁由兩塊組成：」Frames per second (幀率)「和」Component Render (組件渲染)「。

第一個標籤——「Frames per second」——展現的是關於你應用幀率的一個實時更新的實況記錄圖表，藉助這個圖表能夠找出致使應用性能降低的具體動做和組件。

在下面這張圖片中，第一條下沉的紅柱的之上有「M」、「E」、「R」三個圖標；其中，「M」表示發生了 mutation，「E」表示發射了事件 (Event)，而「R」則標示着路由 (Route) 發生變更。當路由發生變更時，應用的幀率會出現短暫降低，這是預料之中的 (由於此時會產生不少回調和新頁面渲染——譯註)；但若是是一條意料以外的「下沉」，就表示須要對哪些組件存在性能問題進行調查了。

下面這張圖片，是「Component Render」標籤的截圖，展現了一個組件各生命週期函數的執行耗時的統計分析。其中左側面板顯示的是組件的總耗時，而右側面板顯示的則是按生成周期函數分拆顯示的耗時。耗時比較極端的組件，在左側面板中會被突出顯示（排前顯示——譯註），這對於性能問題的排查又提供了一個很好的線索。

Settings 標籤

最後但一樣重要的一點是，新增了一個 Settings 菜單頁！目前，這個菜單頁有如下選項：

• 調整工具的界面佈局緊湊度。(對應 Display density 選項——譯註)
• 正規化組件名 (如 my-component 將顯示爲 MyComponent)。(對應 Normalize Component Names 選項——譯註)
• 調整工具界面的主題。(對應 Theme 選項——譯註)

結語

譯註：下面這段文本沒有什麼信息量，就不翻譯了。

Once again, the Vue core team and its community have gone above and beyond with providing an amazing developer tooling experience. The Vue devtools have always been an integral part of the developer experience, and this update was a huge push in the right direction. This release of devtools, combined with the recent release of the vue-cli GUI, provide an amazing development experience from creation to finish.