使用Inspect检查页面时,Chrome不显示屏幕的宽度和高度
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Inspect检查页面时,Chrome不显示屏幕的宽度和高度相关的知识,希望对你有一定的参考价值。
最近我重新安装了我的电脑。完成后重新安装我注意到使用Inspect时,屏幕高度和页面宽度不再显示在右上角。
他们删除了它还是有秘密设置我还没找到?或者也许是一个bug?当我不得不使网站响应时,这使我的生活变得如此简单。
截至2016年5月,Chrome再次拥有此功能.screen dimensions
显然它是在最新的更新中删除的,但是您可以通过按F12然后按Ctrl + Shift + M来访问Toggle设备模式。
如果你不喜欢这种方式,你可以使用这个基于javascript的例子来告诉你窗口的当前宽度:
var onresize = function()
{
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
console.log(width);
}
按F12键,然后按Esc键查看控制台。
基于这个答案:https://stackoverflow.com/a/28241682/3399806
这绝对是他们删除的有用功能。幸运的是,您可以使用Chrome扩展程序来实现相同的功能:
在这里下载:Viewport Dimensions
安装后重新启动浏览器。请享用!
我用自己发现的一个巧妙的小技巧。只需将光标放在检查器中的body
节点上,以便在调整大小时不断突出显示。我真的希望他们重新整合这个功能。
这是一张图片以供澄清:
我创建了一个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();
})();
该功能未被删除,现在有一种不同的方式来访问它。
- 进入Chrome开发工具
- 切换设备视图(Command + Shift + M / Ctrl + Shift + M)
- 然后,在下拉菜单中选择“响应”选项
完成此操作后,您将能够像往常一样来回调整窗口的大小。
我希望这有帮助!
TL; DR确保从当前调整大小的选项卡中打开了开发者控制台。
对于很多人来说,这可能听起来像是:face-palm:但是我在多个开发人员控制台被打开的时候被绊倒了,但是当我调整它时没有看到窗口的尺寸,没有改变设置。
答案是我打开了两个Chrome标签,每个标签显然都有自己的开发者控制台。切换标签时不会切换。因此,我正在使用两个选项卡调整活动窗口的大小,但由于我打开控制台的选项卡未激活,因此我没有看到我的尺寸。
它可能会重新进入Chrome。如果您使用Chrome Canary,它仍然具有相同的功能。
我正在运行版本52.0.2707.0金丝雀
https://www.google.com/chrome/browser/canary.html
以上是关于使用Inspect检查页面时,Chrome不显示屏幕的宽度和高度的主要内容,如果未能解决你的问题,请参考以下文章
在 Chrome Inspect 期间修复了 html 布局之外的页脚踢
Chrome://inspect 显示设备,但不显示任何打开的标签
Chrome 检查器 - 远程调试器 - 在托管模式下未启用剪贴板。请使用 chrome://inspect 检查
Android通过Chrome Inspect调试WebView出现404页面的解决方法