6

The rules for HTML layout are extremely complex, but I have never seen a tool for explaining in detail why elements are layout out the way that they are. I've worked with Firebug and equivalents quite a lot, but they only display calculated sizes - they don't try to explain any of the underlying rules.

Some examples of features such a tool might offer are as follows:

  • If an element with position relative, you might be able see where the element would have been positioned if it were not for the relative values
  • It might explain that the margin appears less than it you'd expect naively because margin collapsing was applied
  • For an element that was uses absolute positioning, it would be nice to know what element was being used as the frame of reference

Do there exist any tools that provide detailed information as to why the rendering engine layed out the elements the way that it did?

5
  • Welcome to Software Recommendations! Though your description holds several criteria required to recommend matching software, it suffers some formatting issues to make them clearly stand out. Please take a look at What is required for a question to contain "enough information"? Then please edit your question and see if you can incorporate some of these improvements. This will significantly improve your chances of good answers!
    – Izzy
    Feb 23, 2014 at 11:52
  • It looks like you are writing about css layout. Read Everything You Know About CSS Is Wrong! By Rachel Andrew & Kevin Yank. It will explain what you need to know, Feb 23, 2014 at 22:29
  • You should at least know about View Source Chart, a Firefox extension (or cross-browser bookmarklet). Read more about it at the developer's website.
    – Dɑvïd
    Feb 23, 2014 at 23:28
  • As an analog question: "The rules for [put your favorite language here] execution are extremely complex..." Why would such a tool be more likely to exist for HTML than for Java or SQL or C++?
    – Ira Baxter
    Jun 15, 2014 at 18:32
  • Vote for these features in Firefox DevTools: Inspection/debugging of stacking contexts for elements and Interactive visualisation for flexbox rules. And perhaps the closest to your original idea Firefox bug: CSS properties highlighter
    – user
    Aug 31, 2014 at 3:46

1 Answer 1

2

I use Google Chrome for all of my debugging, so if Firefox has equivalent features, I do not know about them.

You can accomplish most of your goals using Chrome's Elements panel (hit F12 from any webpage). Find the style element that you think might be part of the problem, uncheck the box next to it or modify the value and Chrome will render the page with the new values. That method would likely solve your first example.

For your second example, click on the computed tab. It will show you all of the rules that could have been applied and will mark out the rules that were not applied. If "margin collapsing" were somewhere in the style-chain, then it would show up on this list.

For your third example, when you have an element selected, look at the bottom of the console. It shows the full list of nested elements leading to the selected element. With that information, you should be able to deduce what parent element is the reference.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.