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

前端 未结 5 1422
花落未央
花落未央 2020-12-28 15:13

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 resize

相关标签:
5条回答
  • 2020-12-28 15:31

    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);
        }
    }
    
    0 讨论(0)
  • 2020-12-28 15:31

    (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

    0 讨论(0)
  • 2020-12-28 15:47
    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.

    0 讨论(0)
  • 2020-12-28 15:49

    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.

    0 讨论(0)
  • 2020-12-28 15:54

    Temporary solution:

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

    2- Click inside website window

    0 讨论(0)
提交回复
热议问题