Chrome developer tools window dimensions are inconsistent

css google-chrome google-chrome-devtools developer-tools
emersonthis picture emersonthis · Mar 5, 2014 · Viewed 10.6k times · Source

When you have the Chrome developer tools open, and you resize the window, a small white box appears in the top right corner telling you the dimensions of the window as you resize it. I've marked it with a big green arrow in the screenshot below.

This is a very useful tool, but I've noticed that frequently the values are unexpected and inconsistent with the widths of other elements. For example, when I took the screenshot below, Chrome says the window width is 419px. But if I click the html elements, whose width should be 100%, Chrome tells me its width is 404px. This is confusing to me. Why are they different? Is this a bug in Chrome?

Chrome developer tools window size indicator

Answer

Neo picture Neo · Jun 27, 2017

FYI those dimension numbers are document.documentElement.clientWidth and document.documentElement.clientHeight.

Robert is correct. Make sure the zoom ratio is 100% to get the correct dimensions.

Related questions

Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

I use some themes for Google Developer Tools from this website: http://devthemez.com/themes/chrome-developer-tools However, after the 32.0.1700.76 m update, all themes have stopped working. What do I need to do to get them working again?

Read More
See :hover state in Chrome Developer Tools

I want to see the :hover style for an anchor I'm hovering on in Chrome. In Firebug, there's a style dropdown that allows me to select different states for an element. I can't seem to find anything similar in Chrome. …

Read More
How to save CSS changes of Styles panel of Chrome Developer Tools?

How to save CSS changes of Styles panel of Google Chrome Developer Tools? At tool's website it's mentioned that we can see all change in resource panel But I'm working locally on a CSS file but changes are not showing …

Read More