深入了解最新的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官方地址(需自备梯子)