Bug Investigation

Systematically reproduces, locates, and diagnoses frontend bugs using steps, hypotheses, DevTools, and minimal repro. Use when 排查bug, bug定位, 调试, debugging, 复现问题, or investigating frontend issues.

Bug 排查（Bug Investigation）

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

触发场景

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

执行流程

1. 明确现象与环境

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

2. 复现与缩小范围

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

3. 假设与验证

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

假设类型	验证方式
前端逻辑/状态	断点、console.log、React DevTools 状态
接口/数据	Network 看请求与响应、mock 数据对比
样式/布局	审查元素、Computed、覆盖样式来源
时机/异步	执行顺序、Promise/async、事件触发顺序
环境/兼容	换浏览器、无痕、禁用扩展、不同设备

4. 定位根因

• 指出具体文件 + 位置（行/函数/组件）
• 用一句话说明根因：例如「在 XX 条件下未做判空导致取属性报错」
• 若为接口或后端问题：明确说明「这是后端问题，前端能做的是：1) 加 loading/错误态兜底 2) 给用户友好提示 3) 上报错误日志」，不要继续往前端代码里找

5. 修复建议

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

输出模板

markdown

## Bug 排查报告

### 现象
- 操作：…
- 预期：… / 实际：…

### 环境
- 浏览器/设备/网络：…

### 复现步骤
1. …
2. …

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

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

### 修复建议
- 方案：…
- 注意：…

常用手段

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