在各种浏览器中调试网站答案

【问题标题】：Debugging Websites in Various Browsers在各种浏览器中调试网站
【发布时间】：2009-12-17 01:30:48
【问题描述】：

我第一次涉足网站设计，我学到了很多东西。我现在也明白为什么 Web 开发人员不热衷于为 Internet Explorer 进行开发。似乎没有什么能按我的预期工作。然而，由于该网站必须跨浏览器运行，我花时间在 Firefox、Chrome 和 IE 中查看它。然而，对我来说非常不明显的是如何判断网站的问题所在。

例如，我的一个页面的布局强制页脚位于页面底部。它在 Chrome 和 Firefox 中看起来很棒，但在 IE 中出现了一些问题，使页脚向右对齐（并导致出现水平滚动）。我已经玩过代码，但在 IE 中并没有真正响应我想要的方式（即使它在其他浏览器中也是如此）。

是否有任何工具可以帮助“调试”网站上的问题，以便修复它不仅仅是一种试错法？谢谢。

【问题讨论】：

标签： debugging cross-browser

【解决方案1】：

我最喜欢的适用于所有浏览器的之一是X-Ray。您只需将该页面上的链接粘贴到书签中，它就会在您正在测试的页面顶部加载一些外部 JavaScript。它显示了有关您单击的 DOM 对象的一堆参数，以及它在模型中的层次结构。

至于您的特定页脚问题，我认为可能缺少清除比其父容器更宽的浮动和 div。

【讨论】：

【解决方案2】：

有像 GWT、ext-js、YUI 这样的框架可以隐藏很多浏览器错误。但是今天（接近 2009 年底），仍然没有一种好的、可行的方法来缩小浏览器问题的范围并加以解决。

PS：我在这里收集有助于调试的工具：Which tools do you use to debug HTML/JS in your browser?

【讨论】：

Aaron 引用的线程包含我知道的所有工具以及一些。杰森，我建议你看看。
为了完整性也刚刚添加了 X 射线。

【解决方案3】：

我假设您已经检查了您的代码是否有效，并且

HTML 验证器，例如：W3C Markup Validation Service
CSS 检查器，例如：W3C CSS Validation Service

当然，您的 html 文件中应该有正确的 doctype。如果没有 doctype，一些浏览器会进入 quirks 模式以模拟旧浏览器中的错误。

【讨论】：

【解决方案4】：

跨浏览器的 JavaScript 库，如 jQuery 及其 UI 组件，可以非常有助于避免浏览器之间的特殊性。 Microsoft 提供了 IE Developer Toolbar，它不像 Firebug 那样容易使用，但仍然非常有用。像 MS Script Debugger 或 Visual Studio 这样的即时调试器也可以节省时间。

【讨论】：

【解决方案5】：

我喜欢 Firefox 的 Firebug IE8 的工具菜单中有开发者工具，旧版本有IE Developer Toolbar。 Chrome 的页面菜单中有类似的工具。

所有这些都允许您在页面上的元素在其特定浏览器中呈现时看到它们，我通常发现这对调试浏览器特定问题非常有帮助。

【讨论】：