Chrome does not show width and height of screen when inspecting the page with Inspect

Question

Recently I reinstalled my PC. When finished reinstalling everything I noticed upon using Inspect that the screen height and width of the page does not show on the top right corner anymore.

Did they remove it or is there a secret setting I haven't found yet? or maybe a bug? This made my life so much easier when I had to make a site responsive.

Google Chrome Canary still has this functionality. So if i need the dimensions, I just switch over to that. — user3766844, Mar 31 '16 at 15:36
Chrome Canary has this feature still/again https://www.google.com/chrome/browser/canary.html — Chad, Apr 13 '16 at 13:02
same here, still waiting for that magical moment for it to reappear — Niels, Apr 23 '16 at 13:11
same here, it's annoying when google removes some useful features... — Mike, Apr 27 '16 at 10:48

score 31 · Answer 1 · edited May 23 '17 at 12:10

31

Apparently it was removed in one of the latest updates, however you can access the Toggle device mode by pressing F12 and then pressing Ctrl + Shift + M.

If you do not like this way, you can use this example based on javascript that will tell you the current width of the window:

var onresize = function() 
{
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   console.log(width);
}

Press F12 and then press Esc to see console.

Based on this answer: https://stackoverflow.com/a/28241682/3399806

edited May 23 '17 at 12:10

Community

1
1

answered Mar 13 '16 at 07:04

Joefay

481
5
6

16

Thanks for your answer. I cannot believe why they would remove such a simple, small and great function! This makes my live a little bit harder when I have to develop a website for both desktop and mobile :( – Niels Mar 13 '16 at 15:40
1

@NielsvanOsch I encountered the same problem as you did. The device mode (Ctrl + Shift + M) has also been greatly improved (at least visually). – Stefan Schouten Mar 16 '16 at 16:39
2

Gosh I hate them, it was so useful – user3808307 Mar 20 '16 at 05:34
1

I like the device mode (now). notice the little bars at the top of the page to "snap" to typical sizes. and you can still drag. Default is set to "responsive". i think It's a good change. – arnjmllr Mar 30 '16 at 17:27
Wow....... what a stupid idea to remove that; I noticed it recently vanished and googling led me here. Now I have to go back to Firefox DE so I can have the same functionality. Poor move Google. – Brett Apr 07 '16 at 16:44

score 16 · Answer 2 · edited Apr 20 '16 at 16:34

16

That was definitely a useful feature that they removed. Luckily there's a Chrome extension that you can use to achieve the same functionality:

Download here: Viewport Dimensions

Restart your browser after installing. Enjoy!

edited Apr 20 '16 at 16:34

Chuck Le Butt

47,570
62
203
289

answered Mar 22 '16 at 17:31

Troy Grosfield

2,133
20
19

Works great! Thank you! – user2593040 Mar 23 '16 at 06:13
Yea I like this solution, it's always on and it isn't annoying. – Niels Mar 31 '16 at 21:38
Works like charm! +1 – ops Apr 09 '16 at 07:12
2

Thanks, this should be the answer. – jalbasri Apr 11 '16 at 14:33
I used this, but just wanted to remind people to restart Chrome after installing. : ) – sheriffderek Apr 20 '16 at 05:46

score 14 · Answer 3 · edited Apr 03 '16 at 05:04

14

I use a neat little trick I found out myself. Just keep the cursor on the body node in the inspector so that it's constantly highlighted while resizing. I really hope they reintegrate this functionality.

Here is an image for clarification:

edited Apr 03 '16 at 05:04

Pang

9,564
146
81
122

answered Mar 18 '16 at 19:29

Frank

180
10

1

Why did someone down vote this answer? It works, it's easy and make finding breakpoints ( almost ) as easy as it used to be. Thank you for the tip! – MaDaHoPe Mar 20 '16 at 00:29
@MaDaHoPe It's probably unclear to people because of the language. I didn't get it at first because it says keep your "cursor" here while resizing. I assumed mouse cursor, which is obviously impossible. However, if you click body, move your mouse out of the elements view, press up, down, and begin resizing, it should be fine. – Langdon Apr 07 '16 at 12:12
@Langdon are you by any chance using a windows machine? – Frank Apr 08 '16 at 20:03

JeremyS · Answer 4 · 2016-04-12T22:18:25.277

4

I created a Chrome extension to mimic the old style of having the width X height in the top right corner that is FREE for all. Here's the link to the plugin (FYI extensions do not work on the Chrome plugins page so don't worry): https://chrome.google.com/webstore/detail/width-and-height-display/hhcddohiohbojnfdmfpbbhiaompeiemo?hl=en-US&gl=US

Here's a screenshot:

Alternatively, I took @Joefay and @Micah's (thanks!) answer from above and made a little visual in the upper right hand corner so you don't need to keep your console open after popping the code into the console. You will have to paste it in each time you open a new window or refresh your page however. Hope this helps.

var onresize = function() {
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   var height = window.innerHeight
   || document.documentElement.clientHeight
   || document.body.clientHeight;
   var container = document.getElementById('heightAndWidth');
   container.innerHTML = width + ' x ' + height;
};

(function addHAndWElement() {
    var cssString = 'position:fixed;right:8px;top:8px;z-index:20000;background:rgba(0,0,0,0.6);color:#FFF;padding:4px;'
    var htmlDoc = document.getElementsByTagName('body');
    var newDiv = document.createElement('div');
    var divIdName = 'heightAndWidth';
    newDiv.setAttribute('id',divIdName);
    newDiv.style.cssText = cssString;
    htmlDoc[0].appendChild(newDiv);
    onresize();
})();

edited Apr 12 '16 at 22:18

answered Apr 05 '16 at 19:12

JeremyS

427
2
7

1

clean implementation. looks good. You wouldn't need to copy & paste it each time if you save it as a snippet within devtools (sources > snippets > right click > new). Allows you to just run the snippet whenever, and you don't have to keep track of where you stored this script. – EnigmaRM Apr 11 '16 at 22:37
Thanks @EnigmaRM! Good advice on creating the snippet. Probably easier than creating your own extension, but now it's up on the Chrome store and gives you the ability to click to show dimensions and click again to remove. – JeremyS Apr 12 '16 at 22:21
Nice job man, this is ace and it was bugging the hell out of me having to hover over elements in the dev tools, such a joke! – Joe Corby Apr 13 '16 at 10:25
An actual extension is much better than a snippet. I had started making my own extension to put in the store actually. You beat me to it. – EnigmaRM Apr 13 '16 at 13:45
You should add another feature to this: have it watch for window resize and give an option for it to appear for X number of seconds. And/or make visible only while devtools is open – EnigmaRM Apr 13 '16 at 13:50
@EnigmaRM, those would be great options. I'll look into adding them to the extension. – JeremyS Apr 13 '16 at 19:28

score 4 · Accepted Answer · edited Sep 02 '16 at 21:49

4

As of May2016, Chrome has this functionality again.screen dimensions

edited Sep 02 '16 at 21:49

Troy Grosfield

2,133
20
19

answered May 11 '16 at 18:04

Doc Kodam

723
6
14

1

How do I turn this OFF? Its very annoying because it is in a bad position, nav bar gets hidden. – TetraDev Jul 13 '16 at 20:35

score 2 · Answer 6 · answered Apr 06 '16 at 14:40

2

The feature was not removed, there's a different way to access it now.

Go into Chrome Dev Tools
Toggle the device view (Command + Shift + M / Ctrl + Shift + M)

Then, in the dropdown menu choose the "Responsive" option

After doing this, you'll be able to resize the window back and forth watching the exact window size as always.

I hope this helps!

answered Apr 06 '16 at 14:40

wilsotobianco

1,360
14
19

1

This is a workaround. it's not the exact same thing, but a similar thing may be accomplished. – EnigmaRM Apr 12 '16 at 21:22
I do believe, however, that this is where the original functionality was moved - on purpose. – sheriffderek Apr 19 '16 at 20:48
1

Totally agree @sheriffderek! – wilsotobianco Apr 19 '16 at 21:01

TinkerTenorSoftwareGuy · Answer 7 · 2017-12-18T23:22:11.087

2

TL;DR Make sure the Developer Console was opened from the tab you are current resizing.

This may sound like a :face-palm: to many people, but I got tripped up on multiple developer consoles being open, yet not seeing the dimensions of the window as I resized it, no change to settings.

The answer was that I had two Chrome tabs open, and each tab apparently has its own Developer Console. It will not switch when you switch tabs. Hence, I was resizing the active window with both tabs, but because the tab where I opened the console was not active, I was not seeing my dimensions.

edited Dec 18 '17 at 23:22

answered Apr 12 '17 at 18:27

TinkerTenorSoftwareGuy

798
7
15

Face effing palm indeed. Got here to angrily give this answer. Glad somebody else suffered with me. – ZenVentzi Jul 03 '19 at 13:44

score 0 · Answer 8 · answered Apr 13 '16 at 13:01

0

It may work it's way back into Chrome. If you use Chrome Canary it still has the same feature.

I am running Version 52.0.2707.0 canary

https://www.google.com/chrome/browser/canary.html

answered Apr 13 '16 at 13:01

Chad

1,139
17
41

Chrome does not show width and height of screen when inspecting the page with Inspect

8 Answers8