CODEWITHSUNDEEP
cssgoogle-chromedeveloper-tools
Scott B
Scott B

Reputation: 40157

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

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"?

Upvotes: 15

Views: 37008

Answers (2)

cosmicdreams
cosmicdreams

Reputation: 11

If, like me, you came to this answer looking for a way to output the width of an element in the browser's console, here's that answer:

document.querySelector("element_id").clientWidth;

Upvotes: 0

Abhranil Das
Abhranil Das

Reputation: 5918

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.

Computed Size Screenshot

Click here for bigger image

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

Upvotes: 24

Related Questions