How to find computed size of any element in Chrome Developer Tools?

Question

I'm sure this is somewhere in the developer tools inspector, but I can't find it. Where would I find, for a given element (say, a div), the computed dimensions (height and width) of a given element that I right click on and select "Inspect Element"?

Solution

Just hover over the element name in the ribbon below the developer tools panel. The corresponding element will be highlighted in the browser window and the dimensions appear at a corner of it. Also, if you scroll down the right pane in the developer tools, you'll see the 'Metrics' window which'll give you the computed dimensions and also the margins, paddings, borders etc.

Here's a screenshot of the dimensions of the div that holds your SO question. Notice the dimensions at the bottom left corner of the highlighted region as I hover over the div name at the bottom. On the right is the Metrics window.

Click here for bigger image

For future questions, just refer to Google's nice documentation first.