[使用场景](https://openscreenshot.app/zh-cn/use-cases/)

# 如何为 bug 报告截图

截取页面出错的部分，用箭头和步骤编号标出问题，遮盖令牌和邮箱地址，再把图片粘贴到 issue 中。

作者 [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

写 bug 报告时，只截取页面上显示问题的部分，标出哪里出错，并在把图片粘贴到 issue 之前遮盖所有私密信息。在 OpenScreenShot 中，用**选定区域**或**截取元素**截图，用**箭头**和**步骤编号**工具做标记，用**模糊**的**纯色**填充做遮盖。把网址、浏览器和复现步骤写在 issue 正文中，因为截图只显示页面内容，不包含地址栏。

## 逐步截取并标记 bug

1. 打开页面，让它进入出错状态。关掉挡住问题的横幅。
2. 右键点击页面，打开 **OpenScreenShot** 子菜单，选择**选定区域**或**截取元素**。在默认设置下，点击工具栏图标会截取整页。
3. 截取区域时，围绕问题拖出一个矩形，并留出足够的周边界面，让人能看出问题所在的位置。按 `Enter` 确认。截取元素时，悬停直到你要的卡片、表格或表单出现轮廓，然后点击或按 `Enter`。
4. 在**编辑器**中，在出错的细节处添加一个**箭头**（`A`）。如果 bug 需要多次点击才能复现，为每个操作添加一个**步骤编号**（`S`）。
5. 选择**模糊**（`B`），在**遮盖**下选择**纯色**，然后盖住访问令牌、邮箱地址、账户名和内部主机名。
6. 点击**复制**，或按 `Ctrl+C`（macOS 上为 `⌘C`），然后把图片粘贴到 issue 中。

在元素模式下，`↑` 选择父元素，`↓` 选择子元素。当轮廓落在一个太小或太大的包裹元素上时，这很有用。如果元素没有完全可见，选择器会改为提供整页截图。

## 截取悬停状态、下拉菜单和工具提示

菜单或工具提示常常在你点击别处时关闭。在弹出窗口或**设置**中把**延时**设为 3、5 或 10 秒，开始截图，然后在工具栏徽章倒计时结束前打开菜单。

延时在区域选择开始之前运行，因此拖动仍可能关闭菜单。截取悬停状态时，配合延时使用**可见区域**，之后用**裁剪**（`C`）裁切。你也可以先选择一次区域，再从右键菜单配合延时使用**重复上次区域**：它截取同一个矩形，无需再次拖动。

## 用剪贴板操作跳过编辑器

当截图不需要标记时，在弹出窗口或**设置**中把**截图后**设为**剪贴板**。之后每次截图都直接进入剪贴板，工具栏徽章会确认。用 `Ctrl+V` 或 `⌘V` 把图片粘贴到 issue 中。

这项设置也适用于键盘快捷键和右键菜单。需要标注或遮盖时，把它改回**编辑器**。剪贴板截图会跳过遮盖步骤，因此请在截图前检查页面上有没有私密数据。

## 截图旁边要写什么

截图显示出了什么问题。issue 正文提供开发者复现问题所需的上下文：

- 页面网址，并删除私密的查询参数
- 浏览器名称和版本，以及操作系统
- 复现步骤，顺序与图片中的步骤编号一致
- 你预期的结果，以及实际发生的情况
- 问题发生的时间（如果页面显示实时数据）

一张截图只放一个问题。同一张图片中的第二个 bug 会让人看不清箭头指向哪一个。

## 限制

模糊和马赛克会柔化像素，但可能留下短文本的线索。**纯色**在导出中完全盖住该区域；[遮盖指南](https://openscreenshot.app/zh-cn/blog/redact-screenshot/)说明了如何检查结果。浏览器内部页面和其他受保护页面会阻止扩展截图；请参阅[支持与已知限制](https://openscreenshot.app/zh-cn/support/)。

[截图模式参考](https://openscreenshot.app/zh-cn/docs/#modes)介绍了选择控件，[标注参考](https://openscreenshot.app/zh-cn/docs/#annotate)列出了每个工具和快捷键。回复报告问题的用户时，请参阅[客户支持截图](https://openscreenshot.app/zh-cn/use-cases/customer-support/)。要展示 bug 的动态过程，请参阅[产品演示视频](https://openscreenshot.app/zh-cn/use-cases/product-demos/)。

## 继续阅读

[阅读文档](https://openscreenshot.app/zh-cn/docs/)、[浏览所有指南](https://openscreenshot.app/zh-cn/blog/)，或[获取截图帮助](https://openscreenshot.app/zh-cn/support/)。

---

Canonical page: https://openscreenshot.app/zh-cn/use-cases/bug-reports/