跳到主要内容

你如何识别浏览器错误?

您的新网站没有表现出您的期望 - 但您如何知道您的代码中是否隐藏了该错误,或者该问题是否是浏览器问题?我们问专家。

保罗刘易斯

始终做一个简化的测试用例。这样你就可以消除bug在你的代码或框架中的可能性。它还可以帮助您定义出现错误的触发器。一旦你有一个显示错误的简化测试用例,让其他人检查代码。我们都犯错误,因为我们对代码太熟悉了。永远不要害怕提交包含您的测试用例的错误 - 这是获得供应商优先排序的最佳方法。

Paul Lewis是Google的开发者倡导者

布鲁斯劳森

当然,你在所有浏览器中测试,对吗?因此,如果您在每个浏览器中看到一个错误,那么它可能就是您的代码。但是请确保您在整个范围内进行测试 - 因为不同的浏览器可以共享相同的渲染引擎;例如,Opera和Chrome都使用Blink渲染引擎,因此会出现相同的浏览器错误。

要进一步缩小范围,请使用以下代码验证代码Validator.w3.org,检查你的CSSjigsaw.w3.org/css-validator并查看DevTools控制台以捕获任何JS错误。

如果只有一个渲染引擎行为不端,请将错误报告给浏览器。我们喜欢修复错误,它会让每个人的生活变得更好。史蒂夫福克纳有报告错误的好指南

Bruce Lawson是Opera的开放标准倡导者

克里斯海尔曼

为了能够判断出你的错误或浏览器是否有一些你可以做的事情。首先是测试你的假设。您所遇到的真正的“错误”或“不是您所期望的”?有许多示例,浏览器会根据您的需要执行不同的操作,因为这是标准中定义的方式。这就是为什么检查这个以进行验证很重要的原因。

作为开发人员,我们经常希望事情像库和预处理器这样的抽象一样容易,但是在浏览器中具有相同的功能会使它的执行速度非常慢。

在任何情况下,有几种方法可以找出浏览器是否有错误或者您是否做错了什么:

  • 测试你在不同浏览器中做了什么 - 如果它们都显示'错误',那么你很可能犯了一个错误
  • 如果只有一个浏览器“做错了”,请搜索该浏览器的错误跟踪工具。您可能会发现错误列表和解决方法。如果没有,请提交一个新的错误 - 您可以通过这种方式帮助改进浏览器
  • 检查浏览器控制台的错误日志 - 大多数浏览器现在都有人为可读的错误
  • 使用开发人员工具来跟踪实际发生的情况。如今的开发比以前复杂得多 - 预处理器和库和它们的交互可以在工作中投入大量的扳手。例如,使用Firefox 1中的黑匣子功能来确保您只调试代码 - 错误可能是由您使用的库引起的
  • 设置断点并逐步完成代码 - 可能有一个缺失的变量或一个格式与预期不同的变量
  • 检查网络选项卡以查看是否未加载依赖项或MIME类型是否错误,或者未加载字体
  • 检查本地服务器的设置 - 通常不会以错误的格式发送资源,并使浏览器阻塞

浏览器并不完美,但可以改进。虽然代码中的某个地方出了问题,但是浏览器真的被破坏了。它确实更好地归咎于浏览器而不是找出我们最终出了什么问题,所以很自然地去做。

Chris Heilmann是Mozilla的首席传道者

Lea Verou

如果你在每个浏览器中得到不同的结果(假设你正在测试的每个浏览器都支持你正在使用的所有功能),那么你肯定偶然发现了一个浏览器错误!

当然,您的工作还没有完成:在报告之前,您需要将其简化为基本要素。首先,因为否则您根本不知道错误是什么,所以如何搜索它是否已被报告?其次,因为您的错误报告越准确,您获得修复的机会就越高 - 很快。我写一篇关于创建错误报告的文章几年前,其中大部分仍然非常相关。

您还需要通过阅读相关规范来确定哪个浏览器有问题。您可能会惊讶地发现,有时候您测试的浏览器中不止一个会出错。例如,我最近在伪元素上测试'resize'属性,结果发现WebKit / Blink和Gecko都有不同的错误,所以我不得不提交三个错误报告!

现在,当您测试仅由一个渲染引擎支持的功能时,或者当您在任何地方获得相同的结果但是您怀疑它不正确时,更难以确定您是否真的偶然发现了一个错误。同样,您最好的选择是尽可能地隔离问题,然后阅读规范并将预期结果与您获得的结果进行比较。

不排除规范本身存在错误的可能性 - 规范是由人编写的,并且远非完美。在这种情况下,您需要将问题报告给相应的W3C邮件列表(CSS样式的CSS)。不要害羞 - 标准人们喜欢得到作者关于如何在野外使用这些规范的评论。即使它不是一个错误,你的输入是无价的!

Lea Verou是CSS WG邀请专家

弗朗西丝伯里曼

如果您认为自己手上有浏览器错误,请创建一个测试用例 - 这是使用触发意外效果或错误所需的最少量代码的错误示例,理想情况下删除库的任何使用和其他依赖。 99%的时间,只是通过将你的代码剥离到骨头的动作将帮助你确定错误是你自己的,并且对于那个1%而不是它,你有一个例子问题向浏览器开发者报告。

Frances Berriman是资深设计师和前端工程师

安娜德本汉姆

这最近发生在我身上。我将代码分离到JS Bin上的一个演示中,以确保我写的任何其他东西都没有引起它,并将其缩小到几行CSS。我在不同的浏览器和设备上测试了这个演示,并且意识到这个bug只出现在最新版本的webkit中,用于重复背景图像,背景颜色和CSS变换的元素!为了帮助遇到同样问题的其他人,我提交了一份错误报告。

Anna Debenham是一名前端开发人员

雷伊班戈

作为一名网络开发人员,我总是责怪浏览器制造商,因为我知道我从来没有写过错误的代码!严肃地说,99%的时间我会认为错误与我编写的代码有关,因为浏览器制造商在提前捕获了很多问题方面做得相当不错。

基于浏览器的调试工具已经发生了巨大的变化,使您可以非常轻松地深入研究问题。再加上像JSHint这样的好的linting工具,在大多数情况下,您可以轻松识别开发人员引起的问题。

浏览器端可能出现问题的一个关键指标是当相同的代码在不同的浏览器中出现故障时。这通常表明功能实现中存在差异,此时需要减少测试用例。这就是为什么始终建议在其原生环境中测试浏览器的原因,让您可以查看实际渲染并了解每个操作系统的细微差别。

我倾向于使用JSBin或CodePen来创建简化的测试场景,因为这样可以非常简单地创建标记和JavaScript代码片段来模拟代码。一旦您确定这是一个基于浏览器的问题,请务必报告。假设其他人会这么做太容易了,所以采取额外步骤来提交错误确实会产生很大的不同。

Rey Bango是微软的开发者倡导者

这是发表在中的文章的扩展版本网络杂志问题259。



翻译字数超限