Is there any tool that can show how a CSS property is computed, if it's not inherited or set directly on the element?

Question

If I have a table cell that's X pixels high, can I see what exactly makes it so – whether it's the height of a sibling <td> or it has a child div somewhere with the height of X pixels?

Basically, I have and I want to see why it's 172 pixels and not, say, 150. The height is never set explicitly in code.

Is there a browser extension somewhere that shows this kind of thing, and saves me the trouble of clicking through each child/sibling node to inspect it CSS?

Edit: I already know that most browsers have built-in DOM inspectors. However, not all CSS attributes are inherited or set directly on the element, as I've said in my first paragraph. I'd like to know if there is a better tool that shows the way an attribute is computed.

Answer 1

There is no easy way to narrow down which element is causing a parent element to change its height. Depending on the situation, it could be a direct style applied to the parent element, it could be one child, or many of the children combined. Most browsers have tools built-in or available via an Add-on that can help make the task of tracking down the problematic style easier, but not quite "easy."

• Firefox
• Use Firebug, Hit F12, make sure you're on the Inspector tab and click on the arrow with a box to the left of the Inspector tab and select the element. Styles will be displayed on the right, and broken down into categories such as directly applied styles, and inherited styles from a parent element.
• Internet Explorer
• Hit F12, click on the cursor icon and select the element. It will render a treeview of the directly applied styles and the inherited ones.
• Google Chrome
• Hit F12, the display of the styles will be similar to that of Firebug.

Note that in Firebug, when you have the selection tool enabled, it will outline the element under your cursor showing you on the page the how large the element is (as if you applied a border: 2px solid blue style to it. It will also highlight the respective element in the HTML inspector so you know exactly which element you're dealing with. While this isn't going to magically say "oh hey, this particular element and style is the one giving you problems" it will help you get a clearer visual on the problem.

Answer 2

TreeWalker

Typically I would just highlight the nodes in the DOM tree in the developer console however I occasionally come across oddities with height myself so this will be a nice tool to have at my disposal from this point onward. There were some technicalities to consider how this works:

• You have to use a TreeWalker, things like childNodes only apply to the first generation of descendants though not also their child nodes.
• You need need to use scrollHeight. Things like getComputedStyle will return the visually rendered height though not the fully rendered height.
• I wrote this to return false if there are no descendant elements.
• While not built in to any browser consoles that I know of (yet) this at least does not depend on any frameworks or libraries.

To use just call something such as element_find_descendant_tallest(document.getElementById('test1'));.

---

function element_find_tallest_descendant(e)
{
 var walker = document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,null,false),
 height_current = 0;
 tallest = false;

 while (walker.nextNode())
 {
  var n = parseInt(walker.currentNode.scrollHeight);

  if (n != 'NaN' && n > height_current)
  {
   height_current = n;
   tallest = walker.currentNode;

   //Update console every time new tallest descendant found:
   console.log(walker.currentNode);
   console.log(n);
   console.log('---');
  }
 }

 return tallest;
}