Chrome - 在开发者模式下不显示窗口宽度/高度？

Question

我刚注意到，当我进入开发者模式时，窗口的高度/宽度不再出现在网页的右上角。

不确定我是否意外将其关闭，或者版本升级是否删除了此功能。

如何重新打开？我正在运行49.0.2623.87版本。

Answer 1

窗口右上角的宽度和高度消失了。要获得类似的视图，您现在必须单击开发人员控制台左上角的设备图标（下面以红色显示）。然后在弹出的屏幕上，您需要在屏幕顶部中心的设备下拉选项卡上选择“响应”（蓝色）。

现在您可以看到窗口的宽度/高度并调整其大小。

Answer 2

我创建了一个插件来帮助我，因为我没有在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();
})();

Answer 3

在充足的请求之后，开发人员工具团队brought it back看起来。在不稳定/金丝雀现在，很快就稳定了。