[譯] 深度介紹 Vue DevTools 5.0 新特性
原文： ofollow,noindex">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”表示發生了 m utation，“E”表示發射了事件 ( E vent)，而“R”則標示著路由 ( R oute) 發生變動。當路由發生變動時，應用的幀率會出現短暫下降，這是預料之中的 (因為此時會產生很多回調和新頁面渲染——譯註)；但如果是一條意料之外的“下沉”，就表示需要對哪些元件存在效能問題進行調查了。
下面這張圖片，是“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.