如何提交优秀的浏览器 Bug
通过收藏集保持井井有条根据您的偏好保存内容并对其进行分类。

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

Pete LePage

Robert Nyman

提交一个好的 Bug 需要做一些工作。您的目标应该是尽可能方便浏览器工程师找到哪里出了问题，找到根本原因，最重要的是，找到修复它的方法。能够快速取得进展的 Bug 往往很容易重现，并且具有明确的预期行为。

验证这是一个 Bug

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

什么是正确的行为？

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

它在不同的浏览器中是否有效？

浏览器之间不同的行为通常被优先考虑为互操作性问题，特别是当包含 Bug 的浏览器是特例时。尝试在最新版本的 Chrome、Firefox、Safari 和 Edge 上进行测试，可以使用 BrowserStack 等工具。

如果可能，请检查页面是否不是由于用户代理嗅探而有意表现出不同的行为。在 Chrome DevTools 中，尝试将 User-Agent 字符串设置为另一个浏览器。

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

过去是否按预期工作，但在最近的浏览器版本中损坏？此类回归问题可以更快地得到处理，特别是如果您提供了一个可以正常工作的版本号和一个失败的版本号。您可以使用 BrowserStack 等工具来检查旧的浏览器版本。使用 bisect-builds tool（适用于 Chromium）等工具来搜索更改。

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

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

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

之前是否已报告过？

一旦您了解了 Bug 是什么，就该检查是否已通过搜索浏览器 Bug 数据库报告了该 Bug。

基于 Chromium 的浏览器：https://crbug.com
Firefox：https://bugzilla.mozilla.org/
Safari 和基于 WebKit 的浏览器：https://bugs.webkit.org/

如果您找到描述问题的现有 Bug，请通过为该 Bug 加星标、收藏或评论来表达您的支持。而且，在许多站点上，您可以将自己添加到抄送列表中，并在 Bug 发生更改时获得更新。

如果您决定评论 Bug，请包含有关该 Bug 如何影响您的网站的信息。避免添加“+1”之类的评论，因为 Bug 跟踪器通常会为每个评论发送电子邮件。

报告 Bug

如果之前没有报告过该 Bug，那么现在是时候告诉浏览器供应商了。

创建一个最小化的测试用例

Mozilla 上有一篇关于如何创建最小化测试用例的精彩文章。长话短说，虽然对问题的描述是一个很好的开始，但没有什么比在 Bug 中提供一个链接演示来展示问题更好的了。为了最大限度地提高快速进展的机会，示例应包含演示问题所需的最少代码。最小的代码示例是您可以做的增加 Bug 得到修复几率的第一件事。

以下是最小化测试用例的一些技巧

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

托管一个最小化的测试用例

如果您正在寻找托管最小化测试用例的好地方，那么有几个不错的选择

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

提交您的问题

一旦您获得了最小化的测试用例，您就可以提交该 Bug 了。前往正确的 Bug 跟踪站点，并创建一个新问题。

基于 Chromium 的浏览器 - https://crbug.com/new
Firefox - https://bugzilla.mozilla.org/
Safari 和基于 WebKit 的浏览器 - https://bugs.webkit.org/

添加清晰的描述和重现步骤

首先，提供清晰的描述，以帮助工程师快速了解问题是什么，并帮助分类问题。

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

接下来，提供重现问题所需的详细步骤。这就是您的最小化测试用例的用武之地。

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

最后，描述预期和实际结果。

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 在几个步骤或异常活动后发生时，这一点尤其有用。屏幕录像和屏幕截图通常可以更好地向浏览器工程师展示发生了什么。

包含环境的详细信息

某些 Bug 仅在特定的操作系统上或仅在特定类型的显示器上（例如，低 DPI 或高 DPI）可重现。请务必包含您使用的任何测试环境的详细信息。

提交 Bug

最后，提交 Bug。密切关注您的电子邮件，查看对 Bug 的回复。通常在调查期间，工程师可能会有其他问题。如果他们难以重现问题，他们可能会与您联系。

如何提交优秀的浏览器 Bug 通过收藏集保持井井有条 根据您的偏好保存内容并对其进行分类。