截图 vs 录屏：Bug 报告该用哪个？
发现 Bug 时，你的第一反应可能是截图。但有时截图并不能呈现全貌。那么，什么时候该用截图，什么时候该录制视频？
在这篇文章中，我们将对比 Bug 报告中的截图和录屏，并为你提供一个简单的选择框架。
快速决策指南
| 因素 | 截图 | 录屏 |
|---|---|---|
| 最适合 | 静态视觉问题 | 动态或时间相关问题 |
| 文件大小 | ~100-500 KB | ~1-5 MB（15-30 秒） |
| 捕获速度 | 即时 | 需要设置 |
| 查看速度 | 即时 | 需要观看视频 |
| 标注 | 易于标注 | 较难标注 |
| 步骤覆盖 | 需要多张截图 | 一个录屏覆盖全部 |
| 动画 | 无法捕获 | 完美捕获 |
| 时间问题 | 无法展示 | 精确展示 |
何时使用截图
✅ 布局问题
按钮错位、文字溢出或图片被截断——这些非常适合截图。一张标注好的图片就能告诉开发者需要修复什么。
✅ 文字和内容错误
文字缺失、拼写错误或不正确的标签，最好用截图捕获。圈出问题区域并添加简短说明。
✅ 视觉对比
展示设计变更或回归的"前后对比"，用并排截图快速又清晰。
❌ 避免使用截图
- 移动鼠标就会消失的悬停状态
- 页面过渡或动画
- 性能问题或卡顿
- 多步骤工作流（需要 5 张以上截图）
何时使用录屏
✅ 动画和过渡 Bug
从错误方向滑入的菜单、永不停止的加载动画、或卡顿的页面过渡——这些都无法用静态图像捕获。
✅ 悬停状态和工具提示问题
光标稍微偏离目标就消失的下拉菜单，或出现在错误位置的工具提示——一个 5 秒的录屏就能捕获精确行为。
✅ 多步骤工作流
5 步中的第 3 步失败的结账流程，用录屏展示比五张单独的截图清晰得多。
✅ 性能和时间问题
"5 秒延迟"或"页面加载缓慢"——录屏展示实际时间，比截图信息量大得多。
❌ 避免使用录屏
- 简单的视觉问题（截图更快）
- 敏感内容，不能分享视频
- 文件大小有限制的情况
并列对比
让我们比较一下，用两种方法报告同一个结账 Bug 会是什么样：
截图方式
至少需要 4 张截图：
总计：4 张图片，~1-2 MB，但开发者需要在脑海中拼凑工作流程。
录屏方式
一个 20 秒的录屏：
总计：1 个文件，~3-5 MB，开发者看到的就是实际发生的。
最佳实践：两者结合使用
最好的 Bug 报告往往同时使用截图和录屏：
这样开发者可以获得两全其美的效果：视频的上下文和标注图片的精确性。
BugCapturer 如何支持两者
BugCapturer v1.2.0 设计为无缝支持两种方式：
- 截图： 整页或选定区域截图，附带标注工具（箭头、矩形、文字、模糊）
- 录屏： 标签页录制，支持裁剪和帧提取
- 邮件： 截图和录屏都可以附加到结构化邮件中
- 导出： 所有数据（包括是否附带了录屏）都包含在 TSV 导出中
你不必二选一。针对每个 Bug 使用合适的工具，BugCapturer 会处理其余部分。
---
BugCapturer 是一款免费的 Chrome 扩展，用于 Bug 报告和网页反馈。所有数据处理均在本地浏览器中进行——无服务器、无账户、无追踪。