Chrome Developer Tools - Browser Size?

20,024

Solution 1

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

device mode example

Solution 2

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;
  };
})();

Solution 3

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:

enter image description here

Share:
20,024
Ryan Butterworth
Author by

Ryan Butterworth

Mostly work on web based projects but capable of working with many other frameworks/languages. I guess that's it. I also design random stuff, whether it be for fun or projects I'm working on.

Updated on July 22, 2022

Comments

  • Ryan Butterworth
    Ryan Butterworth almost 2 years

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

    example gif

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