实战:修复前端 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. 如果需要截图验收,请告诉我截哪里。

验收重点

常见跑偏

用截图反馈二次修正

第一次修完后,如果页面仍然不满意,不要直接说“再好看点”。要把反馈变成可执行描述:

修复后还有这个问题:

页面位置:
【哪个区域】

当前现象:
【现在看到什么】

期望结果:
【希望变成什么】

限制:
1. 只做二次修正。
2. 不扩大到全站设计。
3. 不改变已修好的行为。
4. 修完说明这次 diff 和上次 diff 的区别。

常用反馈表达:

修完后继续追问

请不要继续扩展功能。

请做前端 Bug 修复验收:
1. 原复现步骤是否已经通过。
2. 桌面端是否正常。
3. 移动端是否正常。
4. 是否存在文字溢出、遮挡、按钮不可点。
5. 是否有超出这个 Bug 的修改。
6. 如果需要截图复查,请告诉我应该截哪些位置。

前端 Bug 的完成标准

检查项标准
原问题按复现步骤不再出现
响应式关键桌面和移动宽度都可用
交互点击、输入、提交、关闭等状态正常
视觉没有遮挡、溢出、异常留白
范围没有借机改无关页面或全局风格

验收结果