Vue Devtools 的 Pinia 面板提供实时响应式状态视图，支持查看快照、回溯变更、编辑比对、定位源头；含操作日志、时间旅行、Timeline 联动分析等功能。
直接打开 Vue Devtools 的 Pinia 面板，就能看到所有 store 的实时状态快照——这不是截图，而是响应式连接的真实数据视图。关键在于，它不只是“看”，还能回溯、编辑、比对和定位变更源头。
查看状态快照与结构
进入 Vue Devtools 后，切换到 Pinia 标签页，左侧列出全部已注册的 store（如 useUserStore、useAppStore）。点击任一 store，右侧即显示当前完整状态树：
- 嵌套对象可逐层展开，getters 值会以灰色斜体显示，并带计算标识
- 响应式字段旁有小圆点图标，非响应式属性（如普通函数或未被 proxy 的值）不会高亮
- 若 store 使用了
persist插件，本地缓存字段通常会标注 “(localStorage)” 或 “(sessionStorage)”
追踪每次状态变更
状态变化会被自动记录在面板底部的 操作日志（Operations） 区域，每条记录包含时间戳、store 名称、变更类型（state update 或 action call）以及触发位置（文件名+行号）：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 点击某条记录，右侧面板显示变更前后的完整 diff，包括新增、删除、修改的字段
- 若使用
store.$patch({ a: 1, b: 2 })，整个 patch 会被合并为单条日志，而非拆成多次更新 - 异步 action（如
login()）的日志会标记为async action，并附带 resolve/reject 状态
用时间旅行定位问题根源
点击面板顶部的 Time Travel 按钮，开启时间线回溯功能：
立即学习“前端免费学习笔记（深入）”；
- 滑动时间轴或点击历史记录点，立即还原对应时刻的整个 store 状态
- 配合组件面板：在某个时间点暂停后，切到 Components 标签，选中关联组件，观察其 props 或 setup 中读取的 store 数据是否匹配
- 特别适合排查“为什么刚登录完，菜单没刷新”这类时机类问题——回退到登录前、登录中、登录后三帧，一眼看出 state 和 UI 是否同步
结合 Timeline 定位性能与顺序问题
切换到 Timeline 标签页，勾选左侧导航中的 Pinia 事件分类：
- 时间轴上会出现带颜色标记的状态变更气泡，与路由跳转、组件 updated 钩子等事件并列展示
- 拖拽选取一段区间，可筛选出该时段内所有 Pinia 变更，快速识别高频/冗余更新（例如一个按钮连点三次触发了三次相同 commit）
- 点击任意 Pinia 事件，右侧面板不仅显示新旧值，还显示调用栈（含 action 内部逻辑路径），方便确认是业务代码误调还是副作用触发
