27

When an element is selected in the Elements window in Chrome Developer Tools (as of Chrome 63), the Computed tab will show the current computed width and height, and any other non-default properties.

However as far as I can tell, it doesn't describe, explain or reveal the source or reason for an element's box's size if its size is not due directly to a directly set property, or property inheritance or cascade.

Consider this example:

<div id="div1">
    <p id="p1">Lorem ipsum</p>
</div>

With the default HTML5 stylesheet (i.e. div, p { display: block;}) Chrome will show the computed widths and heights of #div1 and #p1 are the same, but nowhere does it say that the height of #div1 is caused by #p1, nor that #p1's height is caused by its content (also taking into consideration line-height, font-size and other related properties).

If the stylesheet is changed to this:

#div1 { height: 500px; }
#p1 { height: 75%; overflow: hidden; }

...then the Developer Tools window should provide some indication that #div1's height comes directly from the height: 500px; property while #p1's height now originates from #div1 and not its content anymore.

Does this functionality exist in Chrome Developer tools or even a JavaScript tool?

Dai
  • 141,631
  • 28
  • 261
  • 374
  • 3
    I want this functionality so much! I always have some element with the wrong size or position, and figuring out why (width/height? max-width/height? content size? CSS grid? flexbox? absolute/relative? SVG viewBox?) is so painful. It would be awesome to be able to inspect the sizing/positioning engine as it does its work. – GaryO Apr 19 '21 at 13:03
  • You describe the problem better than I can. I've searched for this feature for many years and not found it in any developer tools. – Sandra Jun 20 '22 at 14:17

1 Answers1

7

There is a down triangle you can click and see where the computed value is from. I don't think you will be able see all the parent container's settings.

enter image description here

Stickers
  • 75,527
  • 23
  • 147
  • 186
  • 6
    Yeah, it only shows it when the computed value is derived from a property set on that element, not a descendant or parent element, unfortunately. If Chrome lacks this feature entirely then that's going to make working with FlexBox and CSS Grids harder because they introduce more cases where an element's size is defined elsewhere in the DOM. – Dai Feb 08 '18 at 01:07
  • 1
    @Dai You should definitely use Firefox for debugging grid because of the [CSS Grid Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts). – Stickers Feb 08 '18 at 01:24
  • 2
    that's only for CSS Grids - not CSS Flexboxes, Floats, or when an element's width is derived from a rule set on an ancestor or descendant element. – Dai Aug 02 '19 at 22:06