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

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.

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

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!

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:

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

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

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)

3. 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!

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.

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