调试技巧 — 浏览器开发者工具实战
1. React DevTools — Components 面板
作用：以树形结构展示 React 组件层级，选中任意组件可查看其 props、state（hooks）和 context 的当前值（渲染完成后的最新值）。
安装：Chrome Web Store 搜索 "React Developer Tools" 安装，开发环境（localhost）自动激活。
常用操作：
| 场景 | 操作步骤 |
|---|---|
| 确认 state 是否切换成功 | Components → 搜索组件名 → Hooks 区域找到对应 State |
| 确认 prop 是否正确传递 | 选中子组件 → Props 查看值是否与父组件 state 一致 |
| 确认 store 订阅值 | 选中使用useCreateStore的组件 → Hooks 区域 |
核心技巧：对比父子组件值是定位useMemo依赖遗漏的最有效方法。父组件 state 变了但子组件 prop 没变 → 中间有缓存没更新。
2. React DevTools — Profiler 面板
作用：录制一段操作期间所有组件的渲染情况 — 哪些渲染了、为什么渲染、渲染耗时。未渲染的组件灰显并标注 "Did not render"。
常用操作：
| 场景 | 操作步骤 |
|---|---|
| 检查状态切换后哪些组件渲染了 | Profiler → 🔴 录制 → 操作 → 停止 → 火焰图 |
| 验证 useMemo 修复是否生效 | 修复前子组件灰显（未渲染）→ 修复后高亮（重新渲染了） |
| 排查不必要的重渲染 | 点组件 → "Why did this render?" |
技巧：设置中勾选 "Record why each component rendered" 可以看到渲染原因（props changed / hooks changed / parent rendered）。
3. Sources 面板打断点
作用：在源码中设置断点，代码执行到该处暂停，查看当前作用域所有变量的值。Vite 开发服务器启用了 sourcemap，可以直接在.tsx源码上打断点。
打断点的三种方式：
| 方式 | 操作 | 适用场景 |
|---|---|---|
| 手动断点 | Ctrl+P→ 输入文件名 → 点击行号 | 普通调试 |
| 条件断点 | 右键行号 → "Add conditional breakpoint" → 输入条件 | 只在特定条件暂停（如mode === 'pro_plus'） |
| Logpoint | 右键行号 → "Add logpoint" → 输入表达式 | 不暂停，只在 Console 输出日志（不需要改代码） |
快捷键：
| 快捷键 | 作用 |
|---|---|
F10 | Step Over — 逐行执行 |
F11 | Step Into — 进入函数内部 |
Shift+F11 | Step Out — 跳出当前函数 |
重要注意：ReactuseStatesetter 是异步的，在setMode(xxx)处打断点时 Scope 中mode仍是旧值，这是正常的（参见踩坑 ③）。应在消费 state 的地方打断点。
4. Console 临时日志
用法：
console.log('[DEBUG] mode:', mode, 'isProPlus:', isProPlus); console.table(taskTypes); // 数组/对象列表更易读 console.trace(); // 打印调用栈技巧：
用统一前缀
[DEBUG]方便在 Console Filter 框过滤Vite HMR 保存后几百毫秒生效，不需要刷新页面
验证完毕后务必删除，不要提交到仓库
更好的替代：Logpoint（Sources 面板右键行号 → "Add logpoint"）效果等同console.log但不修改源码，页面刷新后自动清除。
5. Network 面板验证 API 请求
作用：查看请求参数和响应数据，验证前端传给后端的值以及后端返回的字段。
| 场景 | 操作 |
|---|---|
| 确认筛选传参 | 过滤task/list→ Payload 查看taskTypes |
| 确认素材字段 | 过滤material/list→ Response 查看motionPrecisionType |
| 重新发送请求 | 右键请求 → "Copy as fetch" → Console 粘贴执行 |
技巧：勾选 "Preserve log" 防止页面跳转时请求记录被清除。
6. Elements 面板观察 DOM
作用：检查当前 DOM 结构和样式，通过 DOM 特征间接判断 React state 的渲染结果。
| 场景 | 方法 |
|---|---|
| 模式是否激活 | 检查对应元素是否有activeclass / 高亮背景色 |
| 标签是否渲染 | Ctrl+F搜索 "Pro+" 文本 |
| DOM 变化断点 | 右键元素 → "Break on" → "subtree modifications" |
7. ESLint 静态检查
作用：编译期检测useMemo/useCallback/useEffect依赖数组遗漏。
# 检查单个文件 npx eslint src/components/Editor/MotionImitation/MotionImitation.tsx # 检查整个目录 npx eslint src/components/Editor/MotionImitation/
项目已配置react-hooks/exhaustive-deps规则（warning 级别），修复依赖遗漏 bug 后立即跑 ESLint 验证。
调试方法选择指南
| 目的 | 推荐工具 | 原因 |
|---|---|---|
| 快速查看当前 state/props | React DevTools Components | 无需改代码，实时显示 |
| 验证组件是否重新渲染 | React DevTools Profiler | 可视化渲染情况 |
| 精确验证某行变量值 | Sources 断点 | 暂停执行，逐步检查 |
| 快速打日志不改代码 | Sources Logpoint | 等同 console.log 但不修改源码 |
| 验证 API 请求参数和响应 | Network 面板 | 直接看网络通信 |
| 通过 DOM 间接判断渲染 | Elements 面板 | 验证 class、文本等 |
| 编译期发现依赖遗漏 | ESLint | 预防性检查 |