Chrome doesn't show screen width and height when checking a page with Inspect

Question

I recently reinstalled my computer. When you have finished reinstalling everything that I noticed when using it, check that the page height and width are no longer displayed in the upper right corner.

Did they delete it or is there a secret setting that I have not found yet? or maybe a mistake? It made my life a lot easier when I had to make the site responsive.

Answer 1

Starting in May 2012, Chrome again has this functionality. screen sizes

Answer 2

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 don't like this method, you can use this javascript based example which will tell you the current window width:

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

Press F12, and then press Esc to see the console.

Based on this answer: stack overflow

Answer 3

This is definitely a useful feature that they removed. Fortunately, there is a Chrome extension that you can use to achieve the same functionality:

Download here: Viewport Dimensions

Restart your browser after installation. Enjoy it!

Answer 4

I use a neat little trick that I recognized myself. Just hold the cursor on the body node in the inspector so that it constantly stands out when you resize. I really hope that they reintegrate this functionality.

Here is an image for clarification:

Answer 5

I created a Chrome extension to simulate an old style with a width of X in the upper right corner, which is FREE for everyone. Here's a 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 is a screenshot:

As an alternative, I took @Joefay and @Micah (thanks!) The answer from above and made a small visual effect in the upper right corner, so you do not need to open the console after entering the code into the console. You will have to insert it every time you open a new window or refresh the page. 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(); })(); 

Answer 6

The function has not been removed, now there is another way to access it.

• Go to Chrome Dev Tools
• Switch device view (Command + Shift + M / Ctrl + Shift + M)

3. Then select "Responsive" from the drop-down menu.

After that, you can resize the window back and forth, observing how exactly the size of the window will look.

Hope this helps!

Answer 7

TL; DR Make sure the developer console is open from the current resize tab.

It may sound like: face-palm: for many people, but I disconnected on several developer consoles that were open, but without seeing the window size when resizing, no changes in the settings.

Answer: I had two Chrome tabs open, and each tab apparently has its own developer console. It does not switch when switching tabs. Therefore, I resized the active window to both tabs, but since the tab in which I opened the console is inactive, I did not see my measurements.

Answer 8

He may return to Chrome. If you use Chrome Canary, it still has the same function.

I am using version 52.0.2707.0 canary

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