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

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

提交的 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 进行评论,请附上有关该 bug 对您的网站有何影响的信息。避免添加“+1”风格的评论,因为 bug 跟踪工具通常会针对每条评论发送电子邮件。

报告 bug

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

创建最小化测试用例

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

下面是一些关于尽量减少测试用例的提示:

  • 下载网页,添加 <base href="https://original.url">,然后验证本地是否存在 bug。如果网址使用 HTTPS,则可能需要使用实时 HTTPS 服务器。
  • 尽可能在尽可能多的浏览器的最新 build 上测试本地文件。
  • 尝试将所有内容浓缩到 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 是在执行多个步骤或出现异常活动后出现的,这尤其有用。屏幕录制和屏幕截图通常可以更好地向浏览器工程师展示发生了什么情况。

添加环境的详细信息

某些 bug 仅在特定操作系统上或特定类型的显示屏(例如低 DPI 或高 DPI)上可重现。请务必包含您使用的所有测试环境的详细信息。

提交 bug

最后,提交 bug。请留意您的电子邮件,了解有关该 bug 的回复。 通常,在调查过程中,工程师可能会有其他问题。如果他们无法重现问题,可能会与您联系。