使用 Firebug 检测网页上的错误答案

【问题标题】：Detect errors on web page with Firebug使用 Firebug 检测网页上的错误
【发布时间】：2014-12-13 01:52:39
【问题描述】：

检查我们的网络应用程序是否存在“重复属性”等错误的最佳方法是什么？

我的开发团队倾向于使用 Firefox 和 Firebug 进行 Web 开发。我们注意到代码库中出现了一些错误，通常是重复的属性，例如：

<div id="MyDiv" class="hide" class="interestingDiv">

我们在 Firebug 的控制台中看不到任何错误，也无法让 Firebug 报告有错误。

我们注意到 Firefox 本身已经意识到这些错误。通过单击“查看页面源代码”，Firefox 将第二个类呈现为红色，并具有“重复属性”的工具提示。但是，我们必须自己搜索代码，寻找任何以红色突出显示的错误。

肯定有比手动查看代码更好的方法吗？我们应该使用什么工具？

谢谢，

菲尔

【问题讨论】：

【解决方案1】：

W3 html 验证器将查看您的 html 并检查这些类型的错误：

编辑：看起来有一个 Firefox 插件可以验证 HTML。我以前从未使用过它，但您可能想研究一下：

【讨论】：

如果我们想单独检查每个页面，那就太好了，但我希望有一些东西可以插入我们的工作流程，比如已经是 Firebug 的一部分。开发人员已经查看了 Javascript 控制台是否有错误，因此理想情况下可以显示页面本身的问题（我想我已经回答了我自己的问题，即他们正在查看 JAVASCRIPT 控制台，那么为什么要显示 HTML 错误！）
这个答案有点太宽泛了。您能否考虑在此处展示验证器如何提供帮助的示例。

【解决方案2】：

Firefox 会自动纠正重复属性等 HTML 错误，即它只是忽略第二个属性。它不会将此作为错误暴露给它的Browser Console。

Firebug 仅显示 Firefox 通过其 API 公开的错误消息，它不会自行分析 HTML/CSS/JavaScript。因此，由于 Firefox 不会针对不正确的 HTML 生成错误消息，因此 Firebug 的 Console 面板不会显示与此相关的任何内容。

虽然 Firefox 提供了另一种显示 HTML 错误的方法，但它的源视图。要到达那里，只需右键单击页面并从上下文菜单中选择查看页面源代码。此视图以红色突出显示重复的属性：

您还有其他选择：

使用 HTML 验证器工具，例如 Html Validator add-on for Firefox 或 http://validator.w3.org/。
您可能想要关注 Firefox bug 878364 要求公开 HTML 错误。

【讨论】：

感谢详细回答。 Firefox 默默地忽略答案似乎是一个奇怪的决定，因为将类分配给元素的原因并不是您希望它因元素而具有某种行为或外观。因此，在您的示例中，“test”类可能会使部分变为蓝色，但“hey”类可能允许它是可点击的。如果忽略这些，则应用程序将无法按预期工作。感谢您提供错误链接和其他链接。
请注意，Firefox 并不是唯一默默忽略重复属性的浏览器。所有主流浏览器（IE、Chrome、Firefox、Opera）都这样做。我检查了 HTML5 标准，但找不到声明此行为的行。它只是说标签上不能有两个同名的属性。我建议遵循上述错误报告。