Menu
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"?
629
You can either find the file in sources or network tab. I can look it up in the sources tab by finding the appropriate domain. The file size is listed at the bottom, under the preview. The sizes are also displayed in the network tab but it has to be open before the image loads, otherwise it doesn't capture.
If you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the Element. scrollWidth and Element. scrollHeight properties.
Open Developer tools ( Ctrl + Shift + I or Settings Icon at the top-right of your browser window => Tools => Developer tools ) on the needed page, switch to the Network tab and reload page. In the Size column you'll see the size of everything loaded (Documents, Stylesheets, Images, Scripts, ...).
The “Computed” tab is generally located in the right panel of the DevTools interface, like it is shown here in Chrome. The content in the Computed tab is important because it shows us the values that the browser is actually using on the rendered website.
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.
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
