Chrome Developer Tools - Browser Size?

Question

I'm using Chrome Developer Tools and trying to get the browser width in px

Google recently rolled out updates for their Developer Tools, before these updates the screen height & width used to appear in the top right of the website preview when scaling the developer tools, but now there's no way to find out the screen size (example below)?

How can I find out the browser size via Chrome dev tools now?

Simonne

Answer 1

They change the way to show this tool, you can find it pressing in device mode

Fausta

Answer 2

I came across this trying to figure this out and couldn't find device mode as per Danamorah's answer. So I thought I would help save some time for a newbie and screen shot the icon to click so you can get measurements.

First, open dev tools, and then the top left corner you should see an icon shaped as a small tablet and phone. Click that and you can adjust measurements with the pixel count:

Boehmenist

Answer 3

It's a bug: https://bugs.chromium.org/p/chromium/issues/detail?id=582421

Google Chrome beta branch has this bug fixed already and the fix is expected to be added to the next stable release (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;
  };
})();

Sommelier

Answer 4

It's not the same, and not as convenient as it used to be. But you can turn on a ruler under developer tools settings (General tab, Elements section, check "show rulers").

Then when you select an element (body or html) you can get the size of the element with a ruler on the x and y of the browser. This will not be the same as your browser window though if your content is wider than the browser. It's inconvenient because it doesn't show you the size of the browser as you are resizing like it used to. Hopefully the original feature comes back.

*Also found that if you Toggle Device Mode on, and select Responsive in the drop down, you can resize the browser area and see real-time screen sizes.

Tearoom