Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome Developer Tools - Browser Size?

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?

like image 973
Ryan Butterworth Avatar asked Mar 29 '16 12:03

Ryan Butterworth


3 Answers

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

device mode example

like image 93
Danamorah Avatar answered Oct 28 '22 08:10

Danamorah


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;
  };
})();
like image 30
Nikita 웃 Avatar answered Oct 28 '22 08:10

Nikita 웃


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

like image 43
iampre409 Avatar answered Oct 28 '22 09:10

iampre409