Chrome 使用 Inspect 检查页面时不显示屏幕的宽度和高度

Question

最近我重新安装了我的电脑。完成重新安装后，我在使用 Inspect 时注意到页面的屏幕高度和宽度不再显示在右上角。

是他们删除了它还是有我还没有找到的秘密设置？或者可能是一个错误？当我必须使网站响应时，这让我的生活变得更加轻松。

Answer 1

显然它已在最新更新之一中删除，但是您可以通过按 F12 然后按 Ctrl + Shift + M 访问切换设备模式。

如果您不喜欢这种方式，您可以使用基于 javascript 的示例，它将告诉您 window:

当前的宽度

var onresize = function() 
{
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   console.log(width);
}

按 F12，然后按 Esc 以查看控制台。

基于这个答案：

Answer 2

我使用了一个我自己发现的巧妙的小技巧。只需将光标保持在检查器中的 body 节点上，以便在调整大小时它会不断突出显示。我真的希望他们重新整合这个功能。

这里有一张图片来说明：

Answer 3

他们删除了这绝对是一个有用的功能。幸运的是，您可以使用 Chrome 扩展来实现相同的功能：

在此处下载：Viewport Dimensions

安装后重新启动浏览器。享受吧！

Answer 4

我创建了一个 Chrome 扩展来模仿右上角宽度 X 高度的旧样式，对所有人免费。这是插件的 link（仅供参考，扩展在 Chrome 插件页面上不起作用，所以不用担心）：https://chrome.google.com/webstore/detail/width-and-height-display/hhcddohiohbojnfdmfpbbhiaompeiemo?hl=en-US&gl=US

截图如下：

或者，我从上面获取了@Joefay 和@Micah（谢谢！）的回答，并在右上角做了一些可视化，这样你就不需要在将代码弹出到控制台后让你的控制台保持打开状态.但是，每次打开新的 window 或刷新页面时，您都必须粘贴它。希望这有帮助。

var onresize = function() {
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   var height = window.innerHeight
   || document.documentElement.clientHeight
   || document.body.clientHeight;
   var container = document.getElementById('heightAndWidth');
   container.innerHTML = width + ' x ' + height;
};

(function addHAndWElement() {
    var cssString = 'position:fixed;right:8px;top:8px;z-index:20000;background:rgba(0,0,0,0.6);color:#FFF;padding:4px;'
    var htmlDoc = document.getElementsByTagName('body');
    var newDiv = document.createElement('div');
    var divIdName = 'heightAndWidth';
    newDiv.setAttribute('id',divIdName);
    newDiv.style.cssText = cssString;
    htmlDoc[0].appendChild(newDiv);
    onresize();
})();

Answer 5

该功能并未被删除，现在有不同的访问方式。

进入Chrome开发工具
切换设备视图（Command + Shift + M / Ctrl + Shift + M）

然后，在下拉菜单中选择 "Responsive" 选项

执行此操作后，您将能够来回调整 window 的大小，并一如既往地观察准确的 window 大小。

希望对您有所帮助！

Answer 6

它可能会在回到 Chrome 时起作用。如果您使用 Chrome Canary，它仍然具有相同的功能。

我是运行版本52.0.2707.0金丝雀

https://www.google.com/chrome/browser/canary.html

Answer 7

截至 2016 年 5 月，Chrome 再次具有此功能。screen dimensions

Answer 8

TL;DR 确保开发者控制台是从您当前调整大小的选项卡打开的。

这对很多人来说听起来像是:face-palm:，但我被打开的多个开发者控制台绊倒了，但在我调整它的大小时没有看到 window 的尺寸，没有变化到设置。

答案是我打开了两个 Chrome 选项卡，每个选项卡显然都有自己的开发人员控制台。切换标签时不会切换。因此，我正在使用两个选项卡调整活动 window 的大小，但是因为我打开控制台的选项卡未处于活动状态，所以我没有看到我的尺寸。

Chrome 使用 Inspect 检查页面时不显示屏幕的宽度和高度

Chrome does not show width and height of screen when inspecting the page with Inspect

browser

google-chrome

google-chrome-devtools