实战:修复前端 Bug
Claude Code 前端 Bug 修复教程:先把页面、设备、复现步骤和期望结果说清楚,再让 CC 定位原因和最小修复。
标准流程
先不要只说“页面坏了”。前端 Bug 最重要的是让 CC 看到完整上下文:在哪个页面、什么设备、什么操作、现在是什么样、应该是什么样。
/plan 请帮我修复一个前端 Bug。 现象: 【描述你看到的问题】 复现步骤: 1. 打开【页面路径】 2. 使用【设备/浏览器/宽度】 3. 执行【操作】 4. 看到【错误现象】 期望结果: 【修好后应该是什么样】 限制: 1. 先分析原因,不要马上修改。 2. 只修改和这个 Bug 直接相关的文件。 3. 不要重构无关代码。 4. 不要引入新依赖。 5. 修改后用 /verify 或截图验收。
前端 Bug 最好一次说清 5 个信息:
| 信息 | 示例 |
|---|---|
| 页面 | /pricing、后台订单页、首页 Hero |
| 设备 | Windows Chrome、iPhone 宽度、移动端菜单 |
| 操作 | 点击按钮、切换 Tab、提交表单、滚动页面 |
| 现象 | 按钮遮挡、文字溢出、数据不刷新、弹窗关不掉 |
| 期望 | 不溢出、状态正确、交互可用、布局稳定 |
信息不全时怎么补
如果一开始只知道“这里不对”,先让 CC 帮你反问。
我现在只能描述大概现象,请你先帮我整理需要补充的信息,不要修改文件。 现象: 【先写你看到的问题】 请问我: 1. 需要哪个页面路径。 2. 需要什么设备或浏览器信息。 3. 需要截图还是文字描述。 4. 需要复现步骤还是错误日志。 5. 如果信息已经足够,请给出只读分析计划。
如果有截图,可以这样描述,不需要自己分析原因:
我会提供截图或截图描述。 请你根据截图先判断: 1. 问题更像布局、样式、交互、数据还是响应式问题。 2. 还缺少哪些信息。 3. 需要我补充页面路径、设备宽度、操作步骤还是控制台报错。 4. 在信息补齐前不要修改文件。
让 CC 先定位原因
请先定位原因,不要修改文件。 请输出: 1. 这个问题更可能是样式、状态、数据、路由、浏览器兼容还是构建问题。 2. 你准备读取哪些文件。 3. 哪些结论来自文件,哪些只是推测。 4. 最小修复方案是什么。 5. 需要我提供截图或浏览器控制台信息吗。
按问题类型定位
| 问题类型 | 优先让 CC 看什么 |
|---|---|
| 视觉错位 | 组件结构、CSS、响应式断点、父容器宽度 |
| 文字溢出 | 文案长度、按钮尺寸、换行规则、最小宽度 |
| 点击无效 | 事件绑定、禁用状态、遮挡层、路由跳转 |
| 数据不刷新 | 状态管理、请求结果、缓存、加载状态 |
| 表单异常 | 校验规则、提交事件、错误提示、默认值 |
| 移动端问题 | 媒体查询、触摸区域、菜单层级、横向滚动 |
定位阶段只需要得到“最可能原因”和“最小修复点”,不要让 CC 一边猜一边改。
批准修复时怎么说
可以按最小方案修复。 限制: 1. 只修这个 Bug。 2. 不要顺手重构组件。 3. 不要改设计风格,除非这是 Bug 原因。 4. 不要引入新依赖。 5. 完成后请说明桌面端、移动端和交互状态怎么验收。
如果问题只影响样式,限制要更明确:
这次只修样式问题。 要求: 1. 优先改目标组件附近的样式。 2. 不改全局主题、全局布局和基础组件,除非能证明问题来自那里。 3. 不改变页面文案和业务逻辑。 4. 修完说明哪些断点已经考虑。 5. 如果需要截图验收,请告诉我截哪里。
验收重点
- 复现步骤里的问题消失了。
- 桌面端和移动端都没有被破坏。
- 没有文字溢出、遮挡、按钮不可点。
- CC 能解释 diff 和验证方式。
常见跑偏
- 把一个局部样式 Bug 改成全站设计重构。
- 没确认复现步骤就直接猜原因。
- 只看桌面端,忘了移动端。
- 修了视觉,但破坏点击区域或表单交互。
- 看到报错就升级依赖,而不是先定位根因。
用截图反馈二次修正
第一次修完后,如果页面仍然不满意,不要直接说“再好看点”。要把反馈变成可执行描述:
修复后还有这个问题: 页面位置: 【哪个区域】 当前现象: 【现在看到什么】 期望结果: 【希望变成什么】 限制: 1. 只做二次修正。 2. 不扩大到全站设计。 3. 不改变已修好的行为。 4. 修完说明这次 diff 和上次 diff 的区别。
常用反馈表达:
- “这个按钮在 375px 宽度下仍然换行。”
- “弹窗能打开,但关闭按钮被遮挡。”
- “桌面端好了,移动端列表仍然横向溢出。”
- “视觉位置正确了,但点击区域变小了。”
修完后继续追问
请不要继续扩展功能。 请做前端 Bug 修复验收: 1. 原复现步骤是否已经通过。 2. 桌面端是否正常。 3. 移动端是否正常。 4. 是否存在文字溢出、遮挡、按钮不可点。 5. 是否有超出这个 Bug 的修改。 6. 如果需要截图复查,请告诉我应该截哪些位置。
前端 Bug 的完成标准
| 检查项 | 标准 |
|---|---|
| 原问题 | 按复现步骤不再出现 |
| 响应式 | 关键桌面和移动宽度都可用 |
| 交互 | 点击、输入、提交、关闭等状态正常 |
| 视觉 | 没有遮挡、溢出、异常留白 |
| 范围 | 没有借机改无关页面或全局风格 |
验收结果
- 你能描述前端 Bug 的复现步骤。
- 你知道先计划再修。
- 你知道前端 Bug 要看页面结果。
- 你知道修完后要检查响应式和交互状态。