写 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 会让人看不清箭头指向哪一个。

限制

模糊和马赛克会柔化像素,但可能留下短文本的线索。纯色在导出中完全盖住该区域;遮盖指南说明了如何检查结果。浏览器内部页面和其他受保护页面会阻止扩展截图;请参阅支持与已知限制。

截图模式参考介绍了选择控件,标注参考列出了每个工具和快捷键。回复报告问题的用户时,请参阅客户支持截图。要展示 bug 的动态过程,请参阅产品演示视频。