Vue.js devtools插件是一款常用的调试工具，可以帮助开发者在网页端快速调试各种问题 。该插件提供了多种功能和工具，帮助开发者更好地完成日常网页开发任务，满足用户对于开发的需求 。

Vue.js devtools插件

用于调试Vue.js应用程序的浏览器DevTools扩展 。

用于调试Vue.js应用程序的Chrome devtools扩展 。

功能特点

1、性能

与路由选项卡一样，性能选项卡也是一个新增功能 。此选项卡由两部分组成，“每秒帧数”和“组件渲染” 。

第一个选项卡“每秒帧数”显示一个实时源图表，其中包含应用程序的当前fps 。这可用于查找减慢应用程序速度的某些操作或组件 。

2、设置

将显示密度更改为更紧凑的布局

规范化组件名称(my-component将变为MyComponent)

更新主题 - 打开或关闭新的黑暗主题选项

3、路由

Routing选项卡是devtools套件的全新选项 。这里有两个不同的视图，“历史记录”和“路径”，可以通过单击“路由”选项卡标题进行交换 。

软件功能

你会在Chrome DevTools中得到两个新标签 。"?? Components "和"?? Profiler" 。

组件标签显示了在页面上渲染的根React组件，以及它们最终渲染的子组件 。

通过选择树中的一个组件，你可以在右边的面板中检查和编辑其当前的道具和状态 。在面包屑中，你可以检查所选的组件、创建它的组件、创建那个组件的组件，依此类推 。

如果你使用常规的Elements标签检查页面上的一个React元素，然后切换到React标签，该元素将在React树中被自动选中 。