How to find the calculated size of any item in Chrome Developer Tools?

Question

I am sure this is somewhere in the developer tool inspector, but I cannot find it. Where would I find for a given element (say, div) the calculated dimensions (height and width) of the given element, which I right-click and select "Inspect element"?

Answer 1

Just hover over the name of the item in the ribbon below the developer toolbar. The corresponding element will be highlighted in the browser window, and the dimensions will appear in its corner. In addition, if you scroll through the right toolbar of the developer’s toolbar, you will see the Metrics window, which will give you the calculated sizes, as well as fields, paddings, borders, etc.

Here is a screenshot of the div sizes that contains your SO question. Pay attention to the sizes in the lower left corner of the selection when I hang above the name div below. On the right is the Metrics window.

Click here to view larger image.

For future questions just open the good documentation first .