如何报告良好的浏览器错误

向浏览器供应商报告您在其浏览器中发现的问题，是改进 Web 平台不可或缺的一部分。

Pete LePage
Robert Nyman

提交一个好的 bug 报告需要花费一些精力。您的目标应该是让浏览器工程师尽可能轻松地找到问题所在、找出根本原因，最重要的是找到解决方法。进展迅速的 bug 往往易于重现，且具有明确的预期行为。

验证是否为 bug

第一步是确定“正确”的行为应该是什么。

正确的行为是什么？

在 MDN 上查看相关 API 文档，或尝试查找相关规范。这些信息可帮助您确定哪个 API 实际已损坏、损坏的位置以及预期行为。

在其他浏览器中是否可以正常运行？

不同浏览器之间的行为差异通常会被优先视为互操作性问题，尤其是在包含 bug 的浏览器是特例时。尝试在最新版本的 Chrome、Firefox、Safari 和 Edge 上进行测试，可能需要使用 BrowserStack 等工具。

如果可能，请检查该网页是否因用户代理嗅探而故意表现出不同的行为。在 Chrome 开发者工具中，尝试将 User-Agent 字符串设置为其他浏览器。

它是在最近的版本中损坏的吗？

此功能过去是否能按预期运行，但在最近的浏览器版本中出现故障？ 此类回归问题可以更快地得到处理，尤其是当您提供正常运行的版本号和失败的版本号时。您可以使用 BrowserStack 等工具来检查旧版浏览器。使用 bisect-builds 工具（适用于 Chromium）等工具搜索更改。

如果问题是回归问题且可以重现，通常可以快速找到根本原因并加以解决。

其他人是否也遇到了同样的问题？

如果您遇到问题，其他开发者很可能也会遇到。 首先，尝试在 Stack Overflow 上搜索该 bug。这可能有助于您将抽象问题转化为具体的损坏 API，并可能有助于您在 bug 修复之前找到短期解决方法。

之前是否有人举报过？

了解 bug 的情况后，您就可以通过搜索浏览器 bug 数据库来检查该 bug 是否已被报告。

如果您发现已有 bug 描述了该问题，请通过为该 bug 加星标、收藏或评论来表示支持。此外，在许多网站上，您都可以将自己添加到抄送名单中，以便在 bug 发生变化时收到更新。

如果您决定对该 bug 发表评论，请提供有关该 bug 如何影响您网站的信息。避免添加“+1”样式的评论，因为 bug 跟踪器通常会针对每条评论发送电子邮件。

报告 bug

如果该 bug 之前未曾报告过，那么现在是时候向浏览器供应商报告了。

创建精简测试用例

Mozilla 撰写了一篇关于如何创建最小化测试用例的精彩文章。简而言之，虽然对问题的描述是一个很好的开始，但没有什么比在 bug 中提供一个演示问题的链接演示更好的了。为了最大限度地提高快速解决问题的可能性，示例应包含演示问题所需的最少代码。提供最简代码示例是提高 bug 修复几率的首要方法。

下面提供了一些有关如何精简测试用例的提示：

  • 下载网页，添加 <base href="https://original.url">，并验证该 bug 是否存在于本地。如果网址使用 HTTPS，则可能需要一个实时 HTTPS 服务器。
  • 在尽可能多的浏览器的最新版本上测试本地文件。
  • 请尝试将所有内容压缩到 1 个文件中。
  • 移除代码（从您知道不必要的代码开始），直到 bug 消失。
  • 使用版本控制，以便保存工作并撤消出错的操作。

托管精简测试用例

如果您想找一个合适的地方来托管缩减后的测试用例，可以考虑以下几个不错的选择：

请注意，其中一些网站会在 iframe 中显示内容，这可能会导致功能或 bug 的行为有所不同。

提交问题

获得精简测试用例后，您就可以提交该 bug 了。 前往正确的 bug 跟踪网站，然后创建新问题。

添加清晰的说明和重现步骤

首先，请提供清晰的说明，帮助工程师快速了解问题所在，并帮助对问题进行分类。

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

接下来，提供重现问题所需的详细步骤，并描述预期结果和实际结果。

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

如需了解详情，请参阅 MDN 上的错误报告撰写指南。

加分项：添加问题的屏幕截图或屏幕录制内容

虽然不是必需的，但添加问题的屏幕截图或抓屏通常会有所帮助。如果 bug 是在执行多个步骤或异常活动后出现的，此功能会特别有用。屏幕录制和屏幕截图通常可以更好地向浏览器工程师展示所发生的情况。

包含环境的详细信息

有些 bug 只能在特定操作系统上重现，或只能在特定类型的显示屏（例如低 DPI 或高 DPI）上重现。请务必提供您使用的所有测试环境的详细信息。

提交 bug

最后，提交 bug。请注意查收邮件，了解该错误的回复。 通常，在调查期间，工程师可能会有其他问题。如果他们难以重现问题，可能会与您联系。