Bug 排查（Bug Investigation）

用可复现步骤、假设验证和工具链，快速定位并诊断前端问题根因。

触发场景

• - 用户说「排查 bug」「定位问题」「复现不了」「不知道哪里错了」
• 描述现象：白屏、报错、样式错乱、请求失败、交互异常等
• 提供错误信息、截图、环境（浏览器、设备、网络）

执行流程

1. 明确现象与环境

• - 现象：用户操作路径 + 预期 vs 实际（一句话描述）
• 环境：浏览器及版本、是否生产/预发/本地、设备/分辨率、网络（慢网/离线）
• 必现/偶现：若偶现，补充可能相关条件（数据量、时机、多 tab 等）

2. 复现与缩小范围

• - 写出最小复现步骤（3–5 步内能复现）
• 判断范围：仅某页面 / 某组件 / 某接口 / 某浏览器 / 某分辨率
• 若无法复现：请用户提供录屏、Console 报错、Network 失败请求，或可复现的测试数据/账号

3. 假设与验证

按优先级做假设并逐条验证（用「是/否」结论）：

4. 定位根因

• - 指出具体文件 + 位置（行/函数/组件）
• 用一句话说明根因：例如「在 XX 条件下未做判空导致取属性报错」
• 若为接口或后端问题，明确说明并给出前端可做的降级或提示

5. 修复建议

• - 给出最小改动修复方案（代码片段或步骤）
• 必要时补充：边界情况、测试建议、类似位置是否需一并检查

输出模板

markdown

Bug 排查报告

现象

• - 操作：…
• 预期：… / 实际：…

环境

• - 浏览器/设备/网络：…

复现步骤

1. 1. …
2. …

假设与验证

• - [ ] 假设 1：… → 验证结果
• [ ] 假设 2：… → 验证结果

根因

• - 位置：文件:行 或 组件名
• 原因：…

修复建议

• - 方案：…
• 注意：…

常用手段

• - Console：报错栈、console.trace、断点
• Network：状态码、响应体、请求头、是否被缓存
• Elements：计算样式、覆盖关系、伪元素
• React DevTools：组件树、props/state、重渲染
• Performance / Lighthouse：卡顿、长任务、布局抖动
• 最小复现：新建单页或 CodeSandbox 只保留必要代码与数据