Show viewport width when resizing window in Chrome developer tools?

Question

I use Chrome with developer tools docked to the right hand side of the window. Chrome used to show the viewport dimensions at the top right of the window, when you resize the viewport by dragging the central divider. I've always found it useful for testing responsive sites and media queries.

Since a recent update, this has disappeared. Is there a way to switch it back on?

I'm using the latest version (Version 49.0.2623.87) on Mac.

Answer 1

As mentioned it's a bug. For the time being a cheap workaround I've been using is put this into your console:

window.addEventListener('resize', function(event){
  console.log(window.innerWidth);
});

Now just watch the console when you resize. It does the trick for basic width checking.

Here's a version that imitates the old resizer:

var b = document.createElement('div');
var bS = b.style;
bS.position = 'fixed';
bS.top = 0;
bS.right = 0;
bS.background = '#fff';
bS.padding = '5px';
bS.zIndex = 100000;
bS.display = 'block';
bS.fontSize = '12px';
bS.fontFamily = 'sans-serif';
b.innerText = window.innerWidth + 'x' + window.innerHeight;
b.addEventListener("click", function(){bS.display = 'none';}, false);
document.body.appendChild(b);
window.addEventListener('resize', function(event){
  bS.display = 'block';
  b.innerText = window.innerWidth + 'x' + window.innerHeight;
});

Answer 2

I must have too much time on my hands.. This is a css version if you are using media query breakpoints. You can't click it away though, although it might be possible to show it for a # number of seconds whenever the media query fires (using animations)...

body::before {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100000;
    box-sizing: border-box;
    display: block;
    padding: 5px;
    font-size: 12px;
    font-family: sans-serif;
    background: #fefaa5;
    border: 1px solid #fff628;
    content: 'xs';
}
@media (min-width: 480px) { body::before {content: 'sm';}}
@media (min-width: 768px) { body::before {content: 'md';}}
@media (min-width: 992px) { body::before {content: 'lg';}}
@media (min-width: 1200px) { body::before {content: 'xl';}}