04 · 调试与问题定位

调试是最能直观感受到 Claude Code 价值的场景。粘贴报错，大多数情况下直接就解决了。

粘贴完整错误信息

最基础的用法：把完整的错误信息贴上去。

这个错误是什么意思，怎么修：

TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (UserList.tsx:15:23)
    at renderWithHooks (react-dom.development.js:14985:18)
    at mountIndeterminateComponent (react-dom.development.js:17811:13)
    ...

关键：

• 贴完整 stack trace，不要只截图，不要只贴最后一行
• 如果是网络错误，同时贴 Request URL、Status Code、Response body

加上出错的代码

报错信息不够时，把相关代码一起贴上：

这段代码在某些情况下报错，帮我找原因：

[粘贴 UserList.tsx 第 1-30 行]

错误：TypeError: Cannot read properties of undefined (reading 'map')
在 line 15 出现，但不是每次都出现，只有 data 加载中时会出现。

让 Claude Code 主动读代码

对于复杂 bug，让它自己去读相关文件：

我的购物车数量更新有 bug：点击"+"号，数量有时更新成功，有时候 UI 没变。

读 /src/hooks/useCart.ts 和 /src/stores/cartStore.ts，
找出可能的竞态条件或状态更新问题。

性能问题排查

React 性能问题（卡顿、白屏、滚动掉帧）：

这个页面初次加载很慢（约 4 秒），
读 /src/pages/NewsFeed.tsx 和它引用的所有组件，
找出主要瓶颈。重点看：
- 是否有同步的大数据处理
- 图片是否懒加载
- 是否有不必要的组件重渲染

调试工作流

比较有效的节奏：

1. 粘贴错误 → Claude 提出 2-3 个假设
2. 你选择最可能的
3. Claude 验证假设（读相关代码）
4. 确认后执行修复
5. 让 Claude 运行测试验证是否修好

不要跳过第 1-3 步直接让它修复。先理解问题，再解决问题，你也能从中学到为什么出错。

让 Claude Code 运行测试

修完 bug 让它自己跑测试：

修好了之后，运行 pnpm test -- --filter=useCart，确认测试通过。

如果测试失败，它会看错误信息自己再修，直到通过。

常见前端 Bug 的有效 prompt

Bug 类型	有效补充信息
渲染问题	贴出 component tree、说明触发步骤
状态 bug	贴出 store 代码和触发的 action
网络错误	贴出 request/response、Network 面板截图描述
样式问题	描述「期望」和「实际」，贴出相关 CSS/Tailwind 类
构建报错	贴出完整 build log，不要只截图报错行