How do I get the screen size to show when Chrome console is open?

Question

I just upgraded to the latest version of Chrome (49.0.2623.87). I'm noticing a slight feature missing.

If I was inspecting a page with the console open and I resized the browser, in the upper-right hand corner Chrome used to have a small indicator of what the browser viewport size was. That's now gone. How do I get it back?

Answer 1

Known bug, already fixed: https://bugs.chromium.org/p/chromium/issues/detail?id=582421

It should land in M50. If you need it sooner then it is currently in Canary (side-by-side with standard Chromes) or you can use the Dev channel of Chrome.

Answer 2

Temporary solution:

1- Right click on html element in Developer Tools(Elements)

2- Click inside website window

Answer 3

bug fixed in 50 version, but now temporary solution:

$(document).ready(function() {
    showSize = ShowSize($(window).width(), $(window).height());
    $(window).resize(function() {
        showSize($(window).width(), $(window).height());
    });
});
function ShowSize(winW, winH){
    var scrollBarWidth = winH < $(document).find('body') ? 17 : 0; 
    $('body')
        .find(".size-window")
        .remove()
        .end()
        .append('<div class="size-window">'+(winW + scrollBarWidth) +' x '+winH+'</div>')
        .find(".size-window")
        .css({
            position: 'fixed',
            right: '10px',
            top: '10px',
            color: '#fff',
            background: 'rgba(0,0,0,0.5)',
            padding: '5px'
        });
    return function(winW, winH){
        scrollBarWidth = winH < $(document).find('body') ? 17 : 0;
        $('body').find(".size-window").text(winW+ scrollBarWidth +' x '+winH);
    }
}

Answer 4

function winSize() {
    console.log(`
Inner Width: ${this.innerWidth}
Inner Height: ${this.innerHeight}
Outer Width: ${this.outerWidth}
Outer Height: ${this.outerHeight}
`);}

winSize();

Anytime you want to check the window size, run winSize(). Note that you can use the up/down arrow keys in Console to scroll thru the commands you have used.

Answer 5

(Chrome 64)

1. Open Chrome Dev tools(F12)
2. while you are resizing ,notice the top right corner and you will see a small chrome style notification showing the current window size which will disappear shortly