CODEWITHSUNDEEP
google-chromegoogle-chrome-devtools
The Qodesmith
The Qodesmith

Reputation: 3375

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

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?

Upvotes: 41

Views: 142375

Answers (6)

Daniel Rch.
Daniel Rch.

Reputation: 170

If you use google chrome then install this extension:

Width and Height Display

That works for me.

Upvotes: 5

Iman
Iman

Reputation: 18956

(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 chrome windows size tooltip after dragging

Upvotes: 15

Mitch
Mitch

Reputation: 661

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.

Upvotes: 10

Alex
Alex

Reputation: 8695

Temporary solution:

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

2- Click inside website window

enter image description here

Upvotes: 50

Дмитрий Харин
Дмитрий Харин

Reputation: 41

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

Upvotes: 4

Garbee
Garbee

Reputation: 10991

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.

Upvotes: 13

Related Questions