将您在其浏览器中发现的问题告诉浏览器供应商,这是完善网络平台不可或缺的一部分!
提交一个好的 bug 并不难,但需要付出一些努力。我们的目标是方便您找出故障的地方、找出根本原因,最重要的是,找到解决问题的方法。进展速度快的错误往往易于重现,并且具有明确的预期行为。
验证这是错误
第一步是确定“正确”的行为应该是什么。
正确的行为是什么?
请查看 MDN 上的相关 API 文档,或尝试查找相关规范。此信息可以帮助您确定实际损坏的 API、损坏的 API 以及预期行为。
能否在其他浏览器中使用?
作为互操作性问题,浏览器之间存在差异的行为通常的优先级更高,尤其是当存在异常的浏览器时。尝试在最新版本的 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,请通过为其加注星标、收藏或评论来添加您的支持。此外,在许多网站上,您可以将自己添加到 CC 列表,并在 bug 发生变化时获取更新。
如果您决定就该 bug 发表评论,请说明该 bug 对您的网站有何影响。避免添加“+1”样式的评论,因为 bug 跟踪器通常会针对每条评论发送电子邮件。
报告 bug
如果之前未曾报告过该 bug,则需要告知浏览器供应商。
创建最小化测试用例
Mozilla 有一篇非常好的文章,介绍了如何创建最小化测试用例。简而言之,尽管对问题进行描述是一个很好的开端,但在 bug 中提供展示问题的链接演示无可厚非。为了最大限度地提高加快进程的速度,该示例应包含演示问题所需的尽可能少的代码。要提高 bug 被修复几率,首先要做的就是尽可能减少代码示例。
以下是有关如何将测试用例最小化的几点提示:
- 下载网页,添加
<base href="https://original.url">
并验证本地是否存在 bug。如果网址使用 HTTPS,这可能需要实时 HTTPS 服务器。 - 在尽可能多的浏览器的最新版本中测试本地文件。
- 请尝试将所有内容压缩到 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 的回复。通常情况下,在调查和修复 bug 时,工程师可能会有其他问题,或者如果他们难以重现问题,可以与他们联系。