如何在多个浏览器中调试 Display/CSS 问题？答案

【问题标题】：How do you debug Display/CSS issues in multiple browsers?如何在多个浏览器中调试 Display/CSS 问题？
【发布时间】：2016-10-24 14:20:47
【问题描述】：

假设我需要为多个浏览器开发一个网站。主要的 - Firefox、Safari、IE、Opera、Chrome

您如何调试显示问题？在 Firefox 中有 Firebug，这很棒。还有一个适用于其他浏览器的 Firebug Lite，但它的功能并不完整——它不会实时刷新。例如，如果我怀疑 jQuery 拖慢了它（添加类等），我该如何发现？

【问题讨论】：

【解决方案1】：

除此之外，您可能还想查找outline property，它为元素添加了边框，但不会中断页面流程。这对于并排比较很有用。

如果你有一些使用 jQuery 应用的类，只需在它们上使用 outline 属性，它应该会在添加类时出现。

.class1 {
  outline: 1px solid blue;
}
.class2 {
  outline: 1px solid red;
}

【讨论】：

嗯 IE6/7 没有什么好东西吗？顺便说一句，我认为 IE* 开发人员的工具没有像 FF 的 firebug 那样的实时更新？因为现在我面临的问题是在jquery动画期间/之后。所以我需要css在那里更新，所以我知道发生了什么。我的 qn 在这里 stackoverflow.com/questions/1194812/css-ie7-8-issues

【解决方案2】：

IE8 包含很棒的developper tools

【讨论】：

【解决方案3】：

您可以使用 W3C CSS Validation Service 验证 CSS

开发者工具

【讨论】：

【解决方案4】：

跨浏览器调试可以使用Firebug Lite。它就像 Firebug 本身，但作为一个外部 JavaScript 库并在 FF、Opera Safari 甚至是好的 ol' IE 中进行了测试（如网页所述）。

【讨论】：

【解决方案5】：

查看我的新工具，通过将鼠标悬停在页面上查看任何元素的布局 - 跨浏览器！

【讨论】：