Chrome Developer Tools - Browser Size?

Question

I am using Chrome Developer Tools and trying to get browser width in px

Google recently rolled out updates for their Developer Tools before these screen updates in height and width are used to appear in the upper right corner of the preview site when scaling the developer tools, but now there is no way to find out the screen size (example below)?

How to find out browser size using Chrome dev tools?

Answer 1

They change the way this tool is displayed, you can find it clicking in device mode

Answer 2

This is a mistake: https://bugs.chromium.org/p/chromium/issues/detail?id=582421

This bug has been fixed in the Google Chrome beta, and it is expected that the patch will be added to the next stable version (version 50).

As a temporary workaround, you can use this bookmarklet:

javascript: (function() { var v = window, d = document; v.onresize = function() { var w = v.innerWidth ? v.innerWidth : d.documentElement.clientWidth, h = v.innerHeight ? v.innerHeight : d.documentElement.clientHeight, s = d.getElementById('WSzPlgIn'), ss; if (!s) { s = d.createElement('div'); s.id = 'WSzPlgIn'; d.body.appendChild(s); s.onclick = function() { s.parentNode.removeChild(s) }; ss = s.style; ss.position = 'fixed'; ss.top = 0; ss.right = 0; ss.backgroundColor = 'black'; ss.opacity = '1'; ss.color = 'white'; ss.fontFamily = 'monospace'; ss.fontSize = '10pt'; ss.padding = '5px'; ss.textAlign = 'right'; ss.zIndex = '999999'; } s.innerHTML = 'w ' + w + '<br />h ' + h; }; })(); 

Answer 3

This is not the same and not as convenient as before. But you can enable the ruler in the settings of the developer’s tools (tab "General", section "Elements", "show rulers").

Then, when you select an element (body or html), you can get the size of the element with a ruler on x and y of the browser. This will not be the same as the browser window if your content is wider than the browser. This is inconvenient because it does not show the size of the browser as it resizes, as it was before. Hope the original function will return.

* It was also found that if you turned on device mode and select "Responsive" from the drop-down list, you can resize the browser area and see the screen dimensions in real time.