Vue.js devtools使用教程

一，Vue.js devtools是什么？

Vue.js DevTools 是一个专门为 Vue.js 应用程序设计的浏览器开发者工具扩展程序。它极大地简化了 Vue 应用的调试和开发过程。

二，Vue.js devtools的作用

1. 组件树检查 - 查看完整的 Vue 组件层次结构

2. 状态调试 - 实时检查和编辑组件的数据、props、computed 属性

3. 事件追踪 - 监控组件发出的事件

4. Vuex 集成 - 调试 Vuex 状态管理（时间旅行调试）

5. 性能分析 - 检测组件渲染性能

三，Vue.js devtools模块介绍

模块	功能	提供信息	用途
Overview	总览应用状态	Vue 版本、组件数量、响应式对象数量、插件、性能指标	快速了解应用整体情况和性能概览
Components	查看组件树及内部状态	组件树结构、组件名/匿名组件、props、data/setup状态、computed、watch、refs、事件	调试组件状态、props传递、响应式数据和子组件通信
Pages	当前页面视图及路由状态	当前路由 path、name、params、query、页面根组件、导航历史、页面状态快照	调试页面显示内容、组件状态、路由参数及页面切换逻辑
Router	路由系统和导航逻辑	路由表（routes）、当前路由对象 ($route)、路由守卫执行状态、导航历史、路由操作	调试路由配置、嵌套路由、导航守卫、页面跳转逻辑
Timeline	应用运行时事件和性能分析	生命周期钩子触发、响应式数据变化、组件更新、事件触发、路由导航、渲染耗时	分析组件行为、调试状态更新、事件顺序、性能瓶颈
Pinia	全局状态管理调试	Store 列表、state、getters、actions、状态变化记录、时间旅行	查看/修改全局状态、调试派生状态和业务逻辑、追踪数据流

1.Overview（概览）

• Star on GitHub (在GitHub上给项目加星)
  跳转到 Vue Devtools 的 GitHub 仓库，可以“Star”（点赞）以支持项目

• Ideas & Suggestions (想法与建议)
  通常跳转到 GitHub Discussions ，提供意见或功能建议

• Project Roadmap (项目路线图)
  查看 Vue Devtools 的开发计划和版本路线图

• Bug Reports (错误报告)
  报告使用 Vue Devtools 时遇到的 bug

2.Components(组件)

Vue 组件的“内部状态观察和调试中心”，可以查看组件树、props、state、computed、refs、事件，并实时修改或跟踪组件的响应式行为。

功能分类	提供信息	用途
组件树结构	- 所有组件的父子关系 - 组件名（或 <Anonymous Component>） - 组件类型（普通组件、函数组件、内置组件、第三方组件）	了解组件嵌套结构，定位组件位置和层级关系
Props	- 组件接收到的 props 数据 - 支持各种数据类型（字符串、对象、数组等） - 可实时修改 props	调试组件输入数据，验证父组件向子组件传值是否正确
State（data / setup 返回值）	- 组件内部响应式状态（data、ref、reactive 等） - 可以实时查看和修改	调试组件内部状态，检查数据绑定和响应式更新
Computed / Watch	- 当前组件的计算属性值 - watch 的依赖关系（部分版本）	检查计算属性和监听器是否正常工作
Refs	- DOM 元素 ref - 子组件 ref - 可以访问对应 DOM 或子组件实例	调试模板引用、操作 DOM 或调用子组件方法
事件（$emit）	- 组件触发的自定义事件及参数	调试组件间通信，查看事件触发顺序和参数
组件渲染/性能信息（部分版本）	- 组件更新次数 - 每次渲染耗时	分析性能瓶颈，找出频繁更新的组件
插槽 / Scoped slots	- 当前组件的插槽内容和插槽 props	调试组件插槽传值是否正确

3.Pages(页面)

当前页面视图和路由状态调试中心，它帮助你了解页面组件、路由参数以及导航历史，便于调试页面显示和路由相关逻辑。

功能分类	提供信息	用途
当前路由信息	- 路由路径（path） - 路由名称（name） - 完整路由对象（fullPath、hash 等）	确认当前页面所在路由，检查路由是否匹配预期
路由参数	- 动态参数（params） - 查询参数（query）	调试路由传参，查看 URL 中动态数据是否正确传递
页面组件	- 当前路由对应的根页面组件 - 可以跳转到 Components 模块查看组件树	查看当前页面显示内容和组件状态，调试页面内部状态
导航历史 / 页面切换	- 前后页面导航记录 - 导航顺序和历史索引	分析页面跳转逻辑，调试前进/后退或重定向行为
状态快照（部分版本）	- 页面切换前后的状态快照	调试页面切换时状态保存或恢复情况，便于排查状态丢失问题
可操作功能	- 点击页面跳转到 Components 面板 - 修改路由参数/查询触发页面刷新	快速调试页面组件状态，测试路由参数对页面的影响
`

4.Timeline( 时间轴)

Timeline 模块主要用于 观察应用运行时的事件、状态变化和性能信息。它和 Components/Pages/Router 不同，侧重于 应用运行过程中的时间轴分析。

功能分类	提供信息	用途
生命周期事件	- 组件生命周期钩子触发顺序：beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted	分析组件行为和渲染顺序，调试组件生命周期逻辑
响应式数据变化	- ref、reactive、computed 值的变化 - 变化前后值	跟踪数据流，调试状态更新和响应式问题
组件更新	- 哪个组件更新了 - 更新耗时	分析组件渲染性能，发现频繁更新的组件，优化性能
自定义事件	- $emit 触发的事件及参数	调试组件间通信，分析事件触发顺序和参数传递
路由导航事件	- 路由切换、守卫执行情况	调试页面跳转逻辑和导航守卫行为
性能信息	- 每条事件的时间戳 - 渲染耗时	找出性能瓶颈，分析事件发生顺序与耗时
事件过滤和分类	- 按事件类型过滤：生命周期、响应式更新、事件触发、路由导航等	快速定位关心的事件类型，减少干扰
可视化时间轴	- 水平时间轴展示事件顺序 - 可点击查看事件详情	直观分析事件发生顺序、依赖关系和性能消耗

5.Router(路由)

Vue Router 的调试中心，关注路由配置、当前路由状态、导航历史和守卫执行情况，便于调试路由跳转、嵌套路由和权限控制逻辑。

功能分类	提供信息	用途
路由表（routes）	- 所有路由配置 - 路由路径（path）和名称（name） - 绑定组件 - 嵌套路由关系 - 懒加载路由	查看应用路由结构，调试嵌套路由和路由组件绑定
当前路由对象（$route）	- 当前路由路径（path） - 路由名称（name） - 动态参数（params） - 查询参数（query） - 完整路径（fullPath）、hash	检查当前路由状态，验证路由匹配和参数传递
导航历史 / 跳转记录	- 前后页面导航记录 - 路由跳转顺序和历史索引	调试路由跳转逻辑，分析前进/后退或动态跳转行为
路由守卫	- 全局守卫：beforeEach、beforeResolve、afterEach - 路由独享守卫：beforeEnter - 组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave - 守卫执行状态（部分版本可显示）	调试路由拦截、权限控制和导航逻辑
路由操作	- 修改路径或参数触发跳转 - 触发导航守卫	测试路由跳转行为，验证路由守卫和页面加载效果
可视化树状结构	- 嵌套路由结构树 - 展开查看子路由和绑定组件	理解路由层级关系，快速定位目标路由

Vue 3 中 router 和 route 的区别
1️⃣ router — 路由实例（Router 对象）

• 来源：const router = useRouter()

• 作用：

  • 代表 整个路由系统实例（Vue Router 创建时返回的对象）。
  • 用来 控制路由导航和操作路由，例如跳转、重定向、添加路由等。
  • 它不包含当前页面状态，而是提供操作方法。

• 常用 API：

  router.push('/home')        // 跳转到指定路径
  router.replace('/login')    // 替换当前历史记录
  router.back()               // 返回上一页
  router.currentRoute.value   // 当前路由对象（响应式 Ref）
  

• 总结：

  • router = 整个路由系统
  • 功能是 “导航和管理路由”

2️⃣ route — 当前路由（Route 对象）

• 来源：const route = useRoute()

• 作用：

  • 代表 当前激活的路由状态。
  • 包含 页面路径、名称、参数、查询参数等信息。
  • 只读，不用于跳转，只用于 读取当前页面状态。

• 常用属性:

  route.path       // 当前路径，比如 '/products/123'
  route.name       // 路由名称
  route.params     // 动态路由参数，比如 { id: '123' }
  route.query      // URL 查询参数，比如 { sort: 'desc' }
  route.fullPath   // 完整路径

• 总结：

  • route = 当前页面的路由信息
  • 功能是 “获取当前页面状态

6.Pinia(状态管理)

专门用于调试 Pinia 状态管理

功能	提供信息	用途
Store 列表	所有注册 Store 名称和状态	快速定位 Store
State	Store 内响应式数据	查看和修改数据
Getters	计算属性当前值	调试派生状态
Actions	Store 方法	调试业务逻辑和触发数据修改
状态变化记录	每次更新的前后值	排查数据流和错误
时间旅行	回溯状态历史	调试复杂交互