Vue DevTools 是官方提供的浏览器扩展（支持 Chrome、Firefox、Edge），安装后会在开发者工具中添加一个“Vue”面板，这是排查问题时的第一站。
组件树：一眼看清页面结构
打开 DevTools 后，最显眼的就是左侧的组件树。它以树形结构展示当前页面上所有的 Vue 组件，嵌套关系一目了然。你可以点击任意组件，右侧会展示该组件的详细信息。
实用场景：
- 定位组件归属：页面某个区域出 bug，但不知道对应哪个
.vue文件，在组件树里逐级展开就能快速锁定。 - 查看父子关系：当一个 prop 传递出现问题，可以在树上查看父组件传给它的数据和事件，不用逐个翻源码文件。
- 选中元素与组件联动：点击 DevTools 左上角的“选择元素”按钮（小靶心图标），鼠标移动到页面上时，对应的组件会在树中高亮，双击即可展开详情，比在模板里
console.log快得多。
组件树还支持筛选和搜索。当页面组件数量庞大时，输入组件名的关键字可以快速过滤，直达目标。
状态调试：实时查看和修改数据
右侧的详情面板按功能分为几个标签页，日常调试最常用的是 Props、Data（或 setup 中的响应式数据）、Computed 和 Pinia/Vuex 状态。
Props 面板：展示父组件传入的所有 prop 及其当前值，如果是引用类型数据，可以展开看到内部结构。当页面表现不符合预期时，先来这里确认“父组件传进来的值到底对不对”，往往能直接定位问题来源。
Data / Setup 面板：显示组件自身的响应式数据（选项式 API 的 data 或组合式 API 暴露的 ref/reactive）。关键之处在于——这些数据可以直接双击编辑。比如你想测试 isLoading 为 true 时的界面效果，直接在这里把值改成 true，页面立即响应，无需修改代码和重新编译。
Computed 面板：展示当前组件所有计算属性的值。计算属性是惰性求值的，只有在这个面板被打开、或者该值被其他效应依赖时才会被计算。如果计算属性的结果与预期不符，可以先在此确认依赖的原始数据是否正确，再排查计算逻辑。
Pinia / Vuex 面板（如果项目使用了状态管理）：以可视化方式展示所有 Store 的 state、getters，同样支持直接编辑和撤销。在调试跨组件共享状态时（如购物车商品、用户登录信息），这个面板可以帮你观察状态变化轨迹，快速判断是“哪次提交导致了 bug”。
真实案例：一个“未收到礼物”的调试故事
假设你正在做一个直播间的礼物特效，观众送出礼物但画面没反应。常规排查可能要 console.log 好几个文件，而在 DevTools 中只需要三步：
- 在组件树里找到特效展示组件，点击后看右侧 Props 面板里是否收到了
giftData。 - 如果
giftData为空，向上找到直播间主组件，看它的 Data 里giftQueue数组是否有新礼物。如果有，再检查父子传递的 prop 绑定是否正确。 - 如果数据不是组件状态而是 Pinia Store 中的，切换标签页查看 Store 状态，确认礼物是否被成功
push进队列。DevTools 还支持时间旅行调试（time travel），可以直接把状态回退到礼物入队之前，重新模拟一次。
整个过程无需打一个 console.log，DevTools 把组件状态“可视化”了出来，让调试从“猜谜”变成了“核对”。对于复杂的前端页面，这个工具能节省大量时间，是每个 Vue 开发者都应该掌握的调优第一利器。