如何在 Chrome 控制台打开时显示屏幕尺寸？答案

【问题标题】：How do I get the screen size to show when Chrome console is open?如何在 Chrome 控制台打开时显示屏幕尺寸？
【发布时间】：2016-03-11 02:17:52
【问题描述】：

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

如果我在控制台打开的情况下检查页面并调整了浏览器的大小，Chrome 会在右上角显示浏览器视口大小的小指示器。现在已经没有了。如何找回？

【问题讨论】：

标签： google-chrome google-chrome-devtools

【解决方案1】：

临时解决方案：

1- 在开发者工具（元素）中右键单击html 元素

2- 在网站窗口内点击

【讨论】：

优秀的临时解决方案！感谢您的提示！
只要将鼠标悬停在它上面也可以。非常感谢您的提示！

【解决方案2】：

（铬 64）

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

【讨论】：

没错，但我一直都需要它，而不仅仅是很短的时间。谢谢。

【解决方案3】：

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

winSize();

任何时候你想检查窗口大小，运行winSize()。请注意，您可以使用控制台中的向上/向下箭头键滚动浏览您使用的命令。

【讨论】：

【解决方案4】：

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

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

【讨论】：

谢谢！我会处理到 50 个出来。

【解决方案5】：

如果您使用谷歌浏览器，请安装此扩展程序：

Width and Height Display

这对我有用。

【讨论】：

【解决方案6】：

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

【讨论】：