将您在浏览器中发现的问题告诉浏览器供应商 是完善网络平台不可或缺的一部分!
提交一个好的 bug 并不难,但需要付出一些努力。我们的目标是 找出问题所在,找出根本原因,最重要的是,找到 解决问题的方法。使用 明确预期的行为
验证这是错误
第一步是确定“正确”行为。
正确的行为是什么?
请查看 MDN 上的相关 API 文档,或尝试 查找相关规格。这些信息可以帮助您确定 出现故障的位置以及故障位置以及预期行为
能否在其他浏览器中使用?
浏览器不同,其行为的优先级通常更高,因为 特别是在存在此错误的浏览器 奇怪的一只。尝试在最新版本的 Chrome 浏览器、Firefox、Safari 和 Edge,可能使用 BrowserStack 等工具。
如果可能,检查网页并非因
用户代理嗅探在 Chrome 开发者工具中,尝试设置 User-Agent
字符串
其他浏览器。
在最近的版本中是否出现故障?
这过去是否按预期运行,但在最近的浏览器版本中中断了? 这种“回归”问题处理速度要快得多,尤其是在您提供 运行失败的版本号和版本号。工具,例如 BrowserStack 可让您轻松检查 bisect-builds 工具 (适用于 Chromium)可非常高效地搜索更改。
如果问题属于回归问题并且可以重现,根本原因通常是 并能够快速找到并解决相应问题。
其他人是否遇到同样的问题?
如果您遇到了问题,其他开发者很有可能也遇到了。 首先,尝试在 Stack Overflow 上搜索该错误。 这有助于您将抽象问题转化为具体的损坏 API, 或许能帮助您找到一个短期的变通方案,直至 bug 修复为止。
以前是否报告过?
了解错误是什么后,就该检查相应错误是否 已通过搜索浏览器错误数据库报告过该问题。
- 基于 Chromium 的浏览器:https://crbug.com
- Firefox:https://bugzilla.mozilla.org/
- 野生动物园和基于 WebKit 的浏览器:https://bugs.webkit.org/
如果您发现现有 bug 能够描述该问题,请提供支持 给错误加注星标、收藏或评论在许多网站上 您可以将自己添加到 CC 列表,并在 bug 发生变化时获得更新。
如果您决定就 bug 发表评论,请添加 bug 的相关信息 会对您的网站产生影响避免添加“+1”样式评论,用作错误跟踪工具 通常会针对每条评论发送电子邮件。
报告 bug
如果之前未曾报告该错误,则需要告知浏览器供应商 。
创建最小化测试用例
Mozilla 团队有一个非常棒的文章, 如何创建最小化测试用例要 长话短说,虽然描述问题是个不错的起点, 在 bug 中提供链接演示,以展示 问题。为了最大限度地提高快速推进的可能性,该示例应包含 演示问题所需的最少代码。尽可能减少代码 要提高成功几率 问题修复
以下是有关如何将测试用例最小化的几点提示:
- 下载网页,然后添加
<base href="https://original.url">
并确认 bug 是否存在于本地。如果 网址使用 HTTPS。 - 在尽可能多的浏览器的最新版本中测试本地文件。
- 请尝试将所有内容压缩到 1 个文件中。
- 移除代码(从已知不必要的内容开始),直到出现 bug 消失。
- 使用版本控制功能,保存工作成果并撤消中断 错误。
托管缩减的测试用例
如果您正在寻找合适的位置来托管缩减版测试用例, 这里有几个不错的选择:
请注意,有些网站在 iframe 中显示内容, 可能会导致功能或 bug 表现出不同的行为。
提交问题
获得最小化的测试用例后,就可以提交该 bug 了。 前往相应的错误跟踪网站,然后创建新问题。
- 基于 Chromium 的浏览器 - https://crbug.com/new
- Firefox - https://bugzilla.mozilla.org/
- 野生动物园和基于 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)
如需了解详情,请参阅错误报告撰写指南 到这里就结束了
额外奖励:添加问题的屏幕截图或抓屏
虽然并非强制性要求,但在某些情况下,添加屏幕截图会很有帮助。 或该问题的抓屏这尤其适用于 可能需要一些奇怪的步骤才能重现。能够看到当下发生的情况 抓屏或屏幕截图通常都很有帮助
包含环境的详细信息
有些错误只能在特定操作系统中重现,或者只能在 特定类型的显示器(例如,低 dpi 或高 dpi)。请务必 包含您使用的所有测试环境的详细信息。
提交 bug
最后,提交 bug。然后,请注意查收电子邮件 对 bug 的响应。通常,在调查和修复 bug 期间, 或遇到困难 重现问题,他们可能会与您联系。