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

将您在自己的浏览器中发现的问题告诉浏览器供应商,是改进 Web 平台不可或缺的一部分!

报告良好的 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 发生变化时获取更新。

如果您决定对错误发表评论,请说明该错误对您的网站有何影响。避免添加“+1”样式的评论,因为错误跟踪器通常会针对每条评论发送电子邮件。

报告错误

如果之前没有报告过该 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 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 的任何回复。通常,在调查期间和修复 bug 时,工程师可能会提出其他问题,或者如果难以重现问题,他们可以与我们联系。