52

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.

5
  • 1
    Google Chrome Canary still has this functionality. So if i need the dimensions, I just switch over to that. Mar 31, 2016 at 15:36
  • Chrome Canary has this feature still/again google.com/chrome/browser/canary.html
    – Chad
    Apr 13, 2016 at 13:02
  • 2
    I hope it makes a return. I used it all the time! Apr 20, 2016 at 16:38
  • same here, still waiting for that magical moment for it to reappear
    – Niels
    Apr 23, 2016 at 13:11
  • same here, it's annoying when google removes some useful features...
    – Mike
    Apr 27, 2016 at 10:48

8 Answers 8

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

5
  • 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, 2016 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). Mar 16, 2016 at 16:39
  • 2
    Gosh I hate them, it was so useful Mar 20, 2016 at 5: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, 2016 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 7, 2016 at 16:44
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!

enter image description here

5
  • Works great! Thank you! Mar 23, 2016 at 6:13
  • Yea I like this solution, it's always on and it isn't annoying.
    – Niels
    Mar 31, 2016 at 21:38
  • Works like charm! +1
    – ops
    Apr 9, 2016 at 7:12
  • 2
    Thanks, this should be the answer.
    – jalbasri
    Apr 11, 2016 at 14:33
  • I used this, but just wanted to remind people to restart Chrome after installing. : ) Apr 20, 2016 at 5:46
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:

enter image description here

3
  • 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, 2016 at 0: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 7, 2016 at 12:12
  • @Langdon are you by any chance using a windows machine?
    – Frank
    Apr 8, 2016 at 20:03
4

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

screen dimensions

1
  • 1
    How do I turn this OFF? Its very annoying because it is in a bad position, nav bar gets hidden.
    – TetraDev
    Jul 13, 2016 at 20:35
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: enter image description here

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();
})();
6
  • 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, 2016 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, 2016 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, 2016 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, 2016 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, 2016 at 13:50
2

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

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

enter image description here

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

enter image description here

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!

3
  • 1
    This is a workaround. it's not the exact same thing, but a similar thing may be accomplished.
    – EnigmaRM
    Apr 12, 2016 at 21:22
  • I do believe, however, that this is where the original functionality was moved - on purpose. Apr 19, 2016 at 20:48
  • 1
    Totally agree @sheriffderek! Apr 19, 2016 at 21:01
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.

1
  • Face effing palm indeed. Got here to angrily give this answer. Glad somebody else suffered with me.
    – ZenVentzi
    Jul 3, 2019 at 13:44
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.