HTML布局调试

Question

我以前问过understanding HTML layout有什么工具。我希望能够看到比这些工具可用的更低级别的信息。例如，我希望能够找出为什么一个元素被放置在一个新的线上。如果没有这样做的工具，那么我认为从开源渲染引擎调试信息可能是有用的。任何开源HTML渲染引擎是否提供对此有用的调试输出？

Answer 1

我会推荐firebug，或Chrome和IE中内置的“开发者工具”。它们都有一个鼠标悬停工具，可以将鼠标悬停或点击元素以显示其所有属性（即使是由渲染器设置的默认属性）。

对于你的例子（换行符），你可以看看有问题的元素是一个块元素，它会强制它到一个新的行，或者它是否比它的父元素宽（这也会导致问题）。

希望这会有所帮助！

Answer 2

火狐：萤火虫（插件）
铬：右键 - >检查元素（内置）
歌剧：右键 - >检查元素（内置）
Safari浏览器：[调试Chrome浏览器因为二者都是基于Webkit和应对类似]
互联网爆：F12（内置开发工具）

对于跨浏览器的解决方案：Firebug Lite

我更喜欢在萤火调试只要有可能，然后使用彼此浏览器的工具的需要的基础上。