此页面由 Cloud Translation API 翻译。

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

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

Pete LePage

Robert Nyman

提交一个不错的 bug，但需要花费一些精力。您的目标应该是让浏览器工程师尽可能轻松地找出损坏的问题、找出问题的根本原因，最重要的是，要找到修复方法。进展迅速的 bug 通常可以快速重现，并且具有明确的预期行为。

确认问题是否为 bug

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

正确的行为是什么？

请查看 MDN 上的相关 API 文档，或尝试查找相关规范。此信息可以帮助您确定实际损坏的 API、损坏的 API 以及预期行为。

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

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

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

它在最近的版本中是否发生故障？

此问题是否在过去按预期运行，但在近期的浏览器版本中出现了问题？这样，我们就可以更快地采取行动来解决此类回归问题，尤其是在您提供正常运行的版本号和失败的版本号的情况下。您可以使用 BrowserStack 等工具检查旧版浏览器。使用 bisect-builds 工具（适用于 Chromium）等工具来搜索更改。

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

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

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

此问题之前是否曾被报告过？

大致了解 bug 的性质后，您可以搜索浏览器 bug 数据库，看看是否有人已报告该 bug。

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

如果您找到了描述该问题的现有 bug，请为该 bug 加星标、收藏或添加评论，以表示您对该 bug 的支持。此外，在许多网站上，您可以将自己添加到 CC 列表，并在 bug 发生变化时获取更新。

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

报告 bug

如果此 bug 之前未曾报告过，现在就该告知浏览器供应商了。

创建最小化测试用例

Mozilla 有一篇关于如何创建最小化测试用例的优质文章。总而言之，虽然说明问题是一个不错的开端，但在 bug 中提供演示链接来展示问题是最有效的做法。为了最大限度地提高快速进程的执行几率，该示例应包含演示问题所需的尽可能少的代码。提供最小代码示例是提高 bug 修复几率的第一要务。

下面是一些关于尽可能减少测试用例的提示：

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

托管缩减后的测试用例

如果您正在寻找合适的位置来托管缩减后的测试用例，可以考虑以下几个位置：

请注意，其中一些网站会在 iframe 中显示内容，这可能会导致功能或 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 仅在特定操作系统上或特定类型的显示屏（例如低 DPI 或高 DPI）上可重现。请务必附上您使用的所有测试环境的详细信息。

提交 bug

最后，提交 bug。请留意您的电子邮件，以便及时收到有关该 bug 的回复。通常，在调查过程中，工程师可能会有其他问题。如果他们难以重现问题，可以与他们联系。