vue devtools插件最强大的功能之一就是能够以树状结构展示整个应用的组件层级关系。开发者可以清晰地看到父组件与子组件之间的嵌套关系，点击任意组件即可查看其详细属性。这种可视化展示方式比传统的DOM结构查看更加直观，特别适合Vue这种组件化框架。通过GitHub参与项目贡献。随着Vue3的普及，也在持续更新迭代，未来还会加入更多实用功能，值得开发者持续关注。

通过网盘分享的文件：devtools_174254.rar

提取码: p6yb

vue devtools插件使用教程

1、在使用之前必须对vue项目进行相关设置，打开shells>chrome>src>manifest.json并把json文件里的"persistent":false改成true；

2、chrome浏览器按f12，即可看到vue菜单；

3、点击vue菜单，即可看到左侧组件嵌套情况，右侧则可选择查看组件，vuex数据仓库,事件派发情况，vue-router，工具设置等等；

4、点击某个组件，还可以看到该组件对应的真实dom，传入的props、data等；

vue devtools插件功能特点

1、性能

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

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

2、设置

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

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

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

3、路由

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

vue devtools插件详细

1、上手简单

在用户已经了解HTML，CSS和JavaScript的情况下，阅读指南后即可立即开始构建。

2、功能多样

渐进式的生态系统，在图书馆和功能全面的框架之间进行扩展。

3、演示优化

20KB min+gzip运行，快速虚拟DOM，最少的优化工作。

Vue.js devtools插件还可以看到它们最后的更新时间，如果它们有自己的主页，还可以对它们进行分类和其他更多的功能。