调试各种浏览器中的网站

Question

我第一次涉足网站设计，我正在学习很多东西。我现在也看到为什么Web开发人员不是开发Internet Explorer的忠实粉丝。似乎没有什么比我想象的更好。但是，由于网站必须跨浏览器工作，我花时间在Firefox，Chrome和IE中查看它。然而，对我来说非常不明显的是如何判断网站中的问题所在。

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

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

Answer 1

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

至于你的具体页脚问题，我会发现可能缺少浮动和div的清除，这些浮动和div比它们的父容器更宽。

Answer 2

有一些框架，如GWT，ext-js，YUI，它们隐藏了很多浏览器错误。但是今天（接近2009年底），仍然没有一种好的，可行的方法来缩小浏览器问题并解决它们。

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

Answer 3

我假设您已使用

检查了您的代码有效

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

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

Answer 4

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

Answer 5

我喜欢Firefox的Firebug IE8和工具菜单中的开发人员工具以及旧版本的IE Developer Toolbar。 Chrome在页面菜单中有类似的工具。

所有这些都允许您在特定浏览器中呈现页面上的元素，这些元素通常在调试浏览器特定问题时非常有用。