如何为 Bug 报告录制屏幕：分步指南
一图胜千言，但一段视频胜千图。在 Bug 报告中，录屏可以是几分钟内修复和数周无人问津的差别。
在本指南中，我们将介绍何时使用录屏、如何使用 BugCapturer 创建录屏，以及让录屏最有用的最佳实践。
何时使用录屏 vs 截图
并非每个 Bug 都需要录屏。以下快速指南可以帮助您决定：
| Bug 类型 | 截图 | 录屏 |
|---|---|---|
| 静态布局问题 | ✅ 最佳选择 | ❌ 过度 |
| 文字缺失或错误 | ✅ 最佳选择 | ❌ 过度 |
| 动画或过渡异常 | ❌ 无法捕获 | ✅ 必不可少 |
| 悬停状态或工具提示问题 | ❌ 难以捕获 | ✅ 最佳选择 |
| 多步骤工作流 Bug | ❌ 需要多张截图 | ✅ 一个录屏覆盖全部 |
| 性能 / 卡顿问题 | ❌ 无法展示速度 | ✅ 展示时间表现 |
| 偶发 / 时序敏感 Bug | ❌ 无法捕获 | ✅ 最佳捕获机会 |
通用规则： 如果一张带标注的截图就能清楚描述 Bug，就用截图。如果 Bug 涉及动作、时间或多个步骤，就用录屏。
如何使用 BugCapturer 录制屏幕
BugCapturer v1.2.0 让录屏变得简单，且一切都在本地完成——无上传，无需第三方服务。
第一步：打开 BugCapturer
点击浏览器工具栏中的 BugCapturer 图标。弹出窗口将显示可用选项。
第二步：开始录制
点击"录制屏幕"按钮。BugCapturer 会请求共享屏幕的权限——选择要录制的浏览器标签页，然后点击"共享"。
第三步：录制 Bug
执行复现 Bug 的步骤。录制控件出现在屏幕底部，显示已用时间。您可以根据需要暂停和继续。
第四步：停止并查看
完成后点击"停止共享"。录屏将出现在 BugCapturer 弹出窗口中供查看。
第五步：裁剪（可选）
如果录屏开头或结尾有不必要的画面，使用裁剪工具将其剪掉。拖动选择手柄选择要保留的部分。
第六步：提取关键帧（可选）
通过从录屏中提取 PNG 格式的关键帧来突出关键时刻。这些可以配合录屏一起使用，方便快速参考。
第七步：附加到 Bug 报告
录屏现在已准备好包含在您的 Bug 报告中。当您通过 BugCapturer 发送邮件时，录屏文件会自动附加。
录屏的最佳实践
保持简短
目标 15-30 秒。如果 Bug 需要更长时间才能复现，可以考虑裁剪录屏，只显示相关部分。
展示步骤
开始录制，然后执行复现步骤。这样开发者可以在一份材料中同时获得视觉证据和操作步骤。
高亮问题
录制完成后使用标注工具——在提取的帧中添加箭头或方框来吸引注意力到问题区域。
检查文件大小
WebM 录屏通常 15-30 秒为 1-3 MB。如果录屏太大，尝试降低录制质量或更积极地裁剪。
清晰命名
使用描述性文件名，如 cart-counter-stale-on-firefox.webm，而不是 recording-001.webm。
常见使用场景
悬停状态 Bug
一个下拉菜单在光标稍微偏离目标时就消失，这几乎不可能用截图描述。一个 5 秒的录屏就能捕获精确行为。
动画性能
页面过渡卡顿或延迟——录屏展示了实际的帧率和时间，比文字描述更有信息量。
多步表单 Bug
一个在 5 步中的第 4 步失败的表单——与其用五张截图，一个录屏展示整个流程和在哪里中断。
故障排除
录制权限不显示
确保您使用的是支持的浏览器（Chrome 100+）。如果权限对话框不出现，检查浏览器网站设置中的录屏权限。
录屏太大
尝试将录屏裁剪到所需的最小长度。如果您在高分辨率显示器（4K）上录制，请在录制前尝试缩小浏览器窗口。
无法听到声音
BugCapturer 默认录制标签页的音频。如果您需要添加旁白，请使用操作系统的录屏工具。
---
BugCapturer 是一款免费的 Chrome 扩展，用于 Bug 报告和网页反馈。所有数据处理均在本地浏览器中进行——无服务器、无账户、无追踪。