[译] 深度介绍 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”表示发生了 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.