Bug复现技能Skill reproduce-bug

---

name: reproduce-bug description: 使用日志、控制台检查和浏览器屏幕截图复现和调查bug

Arguments

[GitHub issue number]

复现Bug命令

查看GitHub issue #$ARGUMENTS 并阅读问题描述和评论。

第一阶段：日志调查

并行运行以下代理以调查bug：

1. 任务 rails-console-explorer(issue_description)
2. 任务 appsignal-log-investigator(issue_description)

思考代码库中可能出错的地方。查找我们可以查看的日志输出。

再次运行这些代理以找到任何可以帮助我们复现bug的日志。

持续运行这些代理，直到对情况有清晰的理解。

第二阶段：使用Playwright进行视觉重现

如果bug与UI相关或涉及用户流程，使用Playwright进行视觉重现：

步骤1：验证服务器是否运行

mcp__plugin_compound-engineering_pw__browser_navigate({ url: "http://localhost:3000" })
mcp__plugin_compound-engineering_pw__browser_snapshot({})

如果服务器未运行，通知用户启动 bin/dev。

步骤2：导航到受影响区域

基于问题描述，导航到相关页面：

mcp__plugin_compound-engineering_pw__browser_navigate({ url: "http://localhost:3000/[affected_route]" })
mcp__plugin_compound-engineering_pw__browser_snapshot({})

步骤3：捕获屏幕截图

在复现bug的每一步拍摄屏幕截图：

mcp__plugin_compound-engineering_pw__browser_take_screenshot({ filename: "bug-[issue]-step-1.png" })

步骤4：遵循用户流程

复现问题中的确切步骤：

1. 阅读问题的复现步骤

2. 使用Playwright执行每一步：

   • browser_click 用于点击元素
   • browser_type 用于填写表单
   • browser_snapshot 查看当前状态
   • browser_take_screenshot 捕获证据

3. 检查控制台错误：

   mcp__plugin_compound-engineering_pw__browser_console_messages({ level: "error" })
   

步骤5：捕获bug状态

当复现bug时：

1. 拍摄bug状态的屏幕截图
2. 捕获控制台错误
3. 记录触发的确切步骤

mcp__plugin_compound-engineering_pw__browser_take_screenshot({ filename: "bug-[issue]-reproduced.png" })

第三阶段：文档记录发现

参考收集：

• [ ] 用具体文件路径记录所有研究发现（例如，app/services/example_service.rb:42）
• [ ] 包含显示bug复现的屏幕截图
• [ ] 列出控制台错误（如果有）
• [ ] 记录确切的复现步骤

第四阶段：报告返回

向问题添加评论，包括：

1. 发现 - 关于原因的你发现的内容
2. 复现步骤 - 确切的复现步骤（已验证）
3. 屏幕截图 - bug的视觉证据（上传捕获的屏幕截图）
4. 相关代码 - 文件路径和行号
5. 建议修复 - 如果有的话