Vue Devtools 以浏览器插件形式挂载到开发环境：左侧组件树层层展开，点击节点即可在右侧面板查看该组件的 props、data、计算属性、触发过的事件以及 Pinia/Vuex 状态，还能直接编辑响应式数据现场验证逻辑变化，省去大量 console.log。
除组件查看外它还内置状态时间旅行：Pinia 与 Vuex 的每次状态变更都被记录，可以回放到任意时刻。性能分析标签页记录组件渲染耗时，路由标签页显示导航历史。生产构建会自动关闭它，不必担心线上数据暴露，开发体验与安全两者兼得。
<!-- 在 Chrome/Edge 应用商店搜索 Vue.js devtools 安装，开发环境自动生效 --> <!-- 特殊环境（iframe、自定义元素）可在主入口显式声明允许 --> <script> // 让嵌入 iframe 中的应用也能被 devtools 识别 if (window.top !== window.self) { window.VUE_DEVTOOLS_CONFIG = { openInEditorHost: 'http://localhost:5173' }; } </script>