[译] 深度介绍 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.