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

Posted 2023-03-07

【中文标题】使用 Inspect 检查页面时，Chrome 不显示屏幕的宽度和高度

【英文标题】：Chrome does not show width and height of screen when inspecting the page with Inspect

【发布时间】：2016-06-26 02:40:51

【问题描述】：

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

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

【问题讨论】：

Google Chrome Canary 仍然具有此功能。所以如果我需要尺寸，我就切换到那个。

Chrome Canary 仍然/再次拥有此功能google.com/chrome/browser/canary.html

我希望它有回报。我一直用它！

这里也一样，还在等待那个神奇的时刻再次出现

这里也一样，当 google 删除一些有用的功能时很烦人......

【参考方案1】：

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

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

答案是我打开了两个 Chrome 标签页，每个标签页显然都有自己的开发者控制台。切换标签时它不会切换。因此，我使用两个选项卡调整活动窗口的大小，但由于我打开控制台的选项卡未激活，我看不到我的尺寸。

【讨论】：

确实是在摸手掌。来到这里愤怒地给出这个答案。很高兴有人和我一起受苦。

【参考方案2】：

自 2016 年 5 月起，Chrome 再次拥有此功能。screen dimensions

【讨论】：

如何关闭此功能？它很烦人，因为它的位置不好，导航栏被隐藏了。

【参考方案3】：

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

在这里下载：Viewport Dimensions

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

【讨论】：

效果很好！谢谢！

是的，我喜欢这个解决方案，它始终开启且不烦人。

像魅力一样工作！ +1

谢谢，这应该是答案。

我用过这个，只是想提醒大家安装后重启Chrome。 :)

【参考方案4】：

它可能会在 Chrome 中运行。如果您使用 Chrome Canary，它仍然具有相同的功能。

我正在运行版本 52.0.2707.0 金丝雀

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

【参考方案5】：

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

这是一个屏幕截图：

另外，我从上面获取了@Joefay 和@Micah 的（谢谢！）的答案，并在右上角做了一点可视化，因此您无需在将代码弹出到控制台后保持控制台打开。但是，每次打开新窗口或刷新页面时，您都必须将其粘贴。希望这会有所帮助。

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

【讨论】：

干净的实现。看起来不错。如果您将其保存为 devtools 中的 sn-p（来源 > sn-ps > 右键单击​​ > 新建），则无需每次都复制和粘贴它。允许您随时运行 sn-p，而不必跟踪存储此脚本的位置。

感谢@EnigmaRM！关于创建 sn-p 的好建议。可能比创建自己的扩展程序更容易，但现在它已在 Chrome 商店上架，您可以单击以显示尺寸并再次单击以删除。

干得好，这是王牌，它让我不得不将鼠标悬停在开发工具中的元素上，真是个笑话！

实际的扩展比 sn-p 好得多。实际上，我已经开始制作自己的扩展程序以放入商店。你打败了我。

您应该为此添加另一个功能：让它监视窗口调整大小并为其提供显示 X 秒数的选项。和/或仅在 devtools 打开时才可见

【参考方案6】：

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

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

然后，在下拉菜单中选择“响应式”选项

完成此操作后，您将能够像往常一样来回调整窗口大小，查看确切的窗口大小。

我希望这会有所帮助！

【讨论】：

这是一种解决方法。这不是完全相同的事情，但可以完成类似的事情。

不过，我确实相信，原来的功能是故意移到这里的。

完全同意@sheriffderek！

【参考方案7】：

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

这里有一张图片来说明：

【讨论】：

为什么有人反对这个答案？它可以工作，很容易，并且使查找断点（几乎）像以前一样容易。谢谢你的提示！

@MaDaHoPe 由于语言的原因，人们可能不清楚。起初我没有明白，因为它说在调整大小时将“光标”保留在此处。我假设鼠标光标，这显然是不可能的。但是，如果您单击 body，将鼠标移出元素视图，按向上、向下键并开始调整大小，应该没问题。

@Langdon 你有没有机会使用 Windows 机器？

【参考方案8】：

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

如果你不喜欢这种方式，你可以使用这个基于javascript的例子，它会告诉你当前窗口的宽度：

var onresize = function() 

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

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

基于这个答案：https://***.com/a/28241682/3399806

【讨论】：

感谢您的回答。我无法相信他们为什么要删除如此简单、小而伟大的功能！当我必须为桌面和移动设备开发网站时，这让我的生活变得更加艰难:(

@NielsvanOsch 我遇到了和你一样的问题。设备模式（Ctrl + Shift + M）也得到了很大的改进（至少在视觉上）。

天哪，我讨厌他们，它太有用了

我喜欢设备模式（现在）。注意页面顶部的小条“捕捉”到典型尺寸。你仍然可以拖动。默认设置为“响应式”。我认为这是一个很好的改变。

哇......删除它真是个愚蠢的主意；我注意到它最近消失了，谷歌搜索把我带到了这里。现在我必须回到 Firefox DE，这样我才能拥有相同的功能。可怜的谷歌。