Vue.js Devtools 插件 v6.5.0

Vue.js devtools插件是一种常用的调试工具，能够帮助开发者在网页端快速定位和解决各种问题。该插件提供了多种功能和工具，使开发者能够更加高效地完成网页开发任务，并满足不同开发需求。

Vue.js devtools插件

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

它是Chrome DevTools的一个扩展，专门为调试Vue.js应用程序设计。

功能特点

1、性能

性能选项卡是新增的功能之一，与路由选项卡类似。它由两个部分组成：“每秒帧数”和“组件渲染”。

第一个部分“每秒帧数”展示了一个实时图表，显示应用程序当前的帧率。这有助于识别导致应用程序性能下降的操作或组件。

2、设置

允许调整显示密度，采用更紧凑的布局

规范化组件名称（例如，将my-component变为MyComponent）

更新主题选项，可以开启或关闭新的黑暗模式

3、路由

路由选项卡是devtools套件中的全新功能，包含两个视图：“历史记录”和“路径”，可以通过点击“路由”选项卡标题进行切换。

软件功能

在Chrome DevTools中，你将看到两个新的标签：“⚛️ Components”和“⚛️ Profiler”。

“Components”标签展示了页面上渲染的根React组件以及它们的子组件。

你可以选择树中的一个组件，在右侧面板中查看和编辑其当前的属性和状态。在面包屑导航中，可以查看所选组件的创建路径。

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