常用功能列表：

1. 组件树查看：允许用户查看完整的 Vue 组件层次结构，以及每个组件的属性、数据、计算属性和插槽。
   
2. 实时编辑：在 Devtools 中直接修改组件的数据，可以立即在应用中看到变化。
3. 事件追踪：查看组件之间的事件传递，帮助理解和调试组件间的交互。
4. Vuex 集成：如果应用使用了 Vuex，可以在 Devtools 中查看、追踪和编辑应用的状态。
5. 性能分析：提供组件渲染的性能数据，帮助找到和解决性能瓶颈。
6. 插件支持：可以集成第三方 Vue 插件，为开发者提供更多的调试工具。
7. 定制设置：允许开发者根据自己的喜好调整 Devtools 的外观和行为。

下载和安装： 

Vue.js devtools | Chrome扩展 - Crx搜搜

用你最喜欢用来调试项目的浏览器打开链接，点击安装按钮，具体安装步骤点击2查看。

安装成功后在浏览器的顶部“扩展”区域可以看到已安装好的插件

基础使用： 

安装完后f12打开开发者工具，你可以在浏览器顶部找到vue选项卡 。

• 在 "Vue" 选项卡中，你会首先看到你的组件树。这显示了你应用中所有组件的层次结构。
• 你可以展开或折叠每个组件来查看其子组件。

当你在组件树中点击某个组件时，右侧的面板会显示该组件的详细信息。在 "Data" 选项卡中，你可以看到组件的 data、props、computed properties 和 methods。

• Data: 显示组件的内部数据。
• Props: 显示从父组件传递给当前组件的属性。
• Computed: 显示组件的计算属性。
• Methods: 显示组件的方法。