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?
They change the way to show this tool, you can find it pressing in device mode
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;
};
})();
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With