核心用法
Bug-investigation 是一套结构化前端问题诊断技能，适用于白屏、样式错乱、接口异常、交互失效等典型场景。核心流程为「现象→环境→复现→假设→根因→修复」六步法，强调用最小可复现步骤（3-5步内）快速收敛问题范围，而非盲目翻阅代码。
关键执行要点：
1. 环境锚定：必须确认浏览器版本、设备分辨率、网络状况（慢网/离线）、生产/预发/本地环境差异
2. 假设驱动验证：按「前端逻辑→接口数据→样式布局→时机异步→环境兼容」优先级排查，每条假设需给出「是/否」结论
3. 工具链配合：Console 追踪栈、Network 对比请求响应、React DevTools 查看状态流、Performance 捕捉长任务
4. 边界判定：明确区分前端/后端责任，接口问题需给出「loading兜底+错误提示+日志上报」三件套方案，不陷入前端代码过度排查
输出规范：强制使用结构化报告模板，包含现象对比、复现步骤、假设验证清单、精确定位（文件:行）、修复代码片段及边界注意事项。
显著优点
- 流程标准化：避免「试试这个、试试那个」的随机调试，将排查转化为可复现、可协作的工程化行为
- 根因导向：强制要求定位到「具体文件+行号+一句话根因」，杜绝模糊描述
- 工具整合：将 DevTools、React DevTools、Performance 等分散能力串联为诊断链
- 责任边界清晰：内置前后端问题判定逻辑，防止前端工程师在接口问题上过度投入
潜在局限
- 依赖用户输入质量：若用户无法提供录屏、Console 报错、Network 截图或测试账号，复现步骤可能受阻
- 框架特化：React DevTools 相关内容对 Vue/Svelte 项目适用性下降，需自行替换对应工具
- 复杂时序盲区：偶现 Bug 若涉及竞态条件、内存泄漏，5步复现可能不足以捕获，需扩展 Performance 内存分析
- 后端黑盒：仅能定位「是否为后端问题」，无法深入服务端日志诊断
适合人群
- 初级-中级前端工程师：建立系统化调试思维，摆脱「console.log everywhere」的低效习惯
- 全栈开发者：快速判定问题边界，合理分配前后端排查精力
- 技术负责人：用于 Code Review 或故障复盘，统一团队故障定位语言
常规风险
- S 级（低风险）：本技能不涉及代码执行、文件操作或网络请求发起，仅为诊断方法论指导
- 唯一风险点：修复建议若被直接复制到生产环境未经测试，可能引入新问题——建议在模板中强调「边界测试」环节