当 Chrome 控制台打开时，如何显示屏幕大小？

Question

我刚刚升级到最新版本 Chrome (49.0.2623.87)。我注意到缺少一个小功能。

如果我在打开控制台的情况下检查页面并调整浏览器大小，在右上角 Chrome 曾经有一个小指示器指示浏览器视口大小。那现在不见了。我如何取回它？

Answer 1

已知错误，已修复：https://bugs.chromium.org/p/chromium/issues/detail?id=582421

应该降落在M50。如果您需要它，那么它目前在 Canary 中（与标准 Chromes 并排），或者您可以使用 Chrome.

的 Dev 频道

Answer 2

bug在50版本修复，现在暂时解决：

$(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 3

临时解决方案：

1- 右键单击开发人员工具（元素）中的 html 元素

2- 点击网站内部 window

Answer 4

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

winSize();

任何时候你想检查 window 尺码，运行 winSize()。请注意，您可以使用控制台中的 up/down 箭头键滚动浏览您使用过的命令。

Answer 5

(Chrome 64)

打开Chrome开发工具(F12)
在调整大小时，请注意 右上角 ，您会看到一个 chrome 样式的小通知，显示当前 window 大小 很快就会消失

Answer 6

如果您使用 google chrome 则安装此扩展程序：

Width and Height Display

这对我有用。

当 Chrome 控制台打开时，如何显示屏幕大小？

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

google-chrome

google-chrome-devtools