HTML Layout debugging

Question

I previously asked what tools there were for understanding HTML layout. I would like to be able to see lower level information than these tools make available. For example, I would like to be able to find out why an element was placed on a new line. If there aren't tools for doing this, then I was thinking that debugging information from an open source rendering engine might be useful. Does any open source HTML rendering engine provide debug output that is useful for this purpose?

Answer 1

Firefox: Firebug (addon)
Chrome: Right click -> inspect element (built-in)
Opera: Right click -> inspect element (built-in)
Safari: [debug with Chrome as both are Webkit based and react similarly]
Internet Exploder: F12 (built in dev tools)

For a cross-browser solution: Firebug Lite

I prefer to debug in firebug whenever possible, and then use each other browsers' tools on an as-needed basis.

Answer 2

I would recommend firebug for that, or the built-in "developer tools" in Chrome and IE. They all have a mouse-over tool that allow you to hover over or click elements to reveal all of their properties (even the default ones set by the renderer).

For your example (newline), you could look at the element in question is a block element, which would force it onto a new line, or whether it is wider than its parent element (which would also cause problems.)

Hope this helps!