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

将您在浏览器中发现的问题告诉浏览器供应商 是完善网络平台不可或缺的一部分!

提交一个好的 bug 并不难,但需要付出一些努力。我们的目标是 找出问题所在,找出根本原因,最重要的是,找到 解决问题的方法。使用 明确预期的行为

验证这是错误

第一步是确定“正确”行为。

正确的行为是什么?

请查看 MDN 上的相关 API 文档,或尝试 查找相关规格。这些信息可以帮助您确定 出现故障的位置以及故障位置以及预期行为

能否在其他浏览器中使用?

浏览器不同,其行为的优先级通常更高,因为 特别是在存在此错误的浏览器 奇怪的一只。尝试在最新版本的 Chrome 浏览器、Firefox、Safari 和 Edge,可能使用 BrowserStack 等工具。

如果可能,检查网页并非因 用户代理嗅探在 Chrome 开发者工具中,尝试设置 User-Agent 字符串 其他浏览器

在最近的版本中是否出现故障?

这过去是否按预期运行,但在最近的浏览器版本中中断了? 这种“回归”问题处理速度要快得多,尤其是在您提供 运行失败的版本号和版本号。工具,例如 BrowserStack 可让您轻松检查 bisect-builds 工具 (适用于 Chromium)可非常高效地搜索更改。

如果问题属于回归问题并且可以重现,根本原因通常是 并能够快速找到并解决相应问题。

其他人是否遇到同样的问题?

如果您遇到了问题,其他开发者很有可能也遇到了。 首先,尝试在 Stack Overflow 上搜索该错误。 这有助于您将抽象问题转化为具体的损坏 API, 或许能帮助您找到一个短期的变通方案,直至 bug 修复为止。

以前是否报告过?

了解错误是什么后,就该检查相应错误是否 已通过搜索浏览器错误数据库报告过该问题。

如果您发现现有 bug 能够描述该问题,请提供支持 给错误加注星标、收藏或评论在许多网站上 您可以将自己添加到 CC 列表,并在 bug 发生变化时获得更新。

如果您决定就 bug 发表评论,请添加 bug 的相关信息 会对您的网站产生影响避免添加“+1”样式评论,用作错误跟踪工具 通常会针对每条评论发送电子邮件。

报告 bug

如果之前未曾报告该错误,则需要告知浏览器供应商 。

创建最小化测试用例

Mozilla 团队有一个非常棒的文章, 如何创建最小化测试用例要 长话短说,虽然描述问题是个不错的起点, 在 bug 中提供链接演示,以展示 问题。为了最大限度地提高快速推进的可能性,该示例应包含 演示问题所需的最少代码。尽可能减少代码 要提高成功几率 问题修复

以下是有关如何将测试用例最小化的几点提示:

  • 下载网页,然后添加 <base href="https://original.url"> 并确认 bug 是否存在于本地。如果 网址使用 HTTPS。
  • 在尽可能多的浏览器的最新版本中测试本地文件。
  • 请尝试将所有内容压缩到 1 个文件中。
  • 移除代码(从已知不必要的内容开始),直到出现 bug 消失。
  • 使用版本控制功能,保存工作成果并撤消中断 错误。

托管缩减的测试用例

如果您正在寻找合适的位置来托管缩减版测试用例, 这里有几个不错的选择:

请注意,有些网站在 iframe 中显示内容, 可能会导致功能或 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)

如需了解详情,请参阅错误报告撰写指南 到这里就结束了

额外奖励:添加问题的屏幕截图或抓屏

虽然并非强制性要求,但在某些情况下,添加屏幕截图会很有帮助。 或该问题的抓屏这尤其适用于 可能需要一些奇怪的步骤才能重现。能够看到当下发生的情况 抓屏或屏幕截图通常都很有帮助

包含环境的详细信息

有些错误只能在特定操作系统中重现,或者只能在 特定类型的显示器(例如,低 dpi 或高 dpi)。请务必 包含您使用的所有测试环境的详细信息。

提交 bug

最后,提交 bug。然后,请注意查收电子邮件 对 bug 的响应。通常,在调查和修复 bug 期间, 或遇到困难 重现问题,他们可能会与您联系。