Chrome开发者工具 - 浏览器大小？

Question

我正在使用Chrome开发者工具，并尝试获取浏览器宽度（以像素为单位）。

最近，Google更新了他们的开发人员工具，在这些更新之前，当缩放开发人员工具时，屏幕高度和宽度会出现在网站预览的右上角，但现在无法找到屏幕尺寸（如下面的示例）？

现在我该如何通过Chrome dev工具查找浏览器大小呢？

- nulled

Answer 1

我试图找到设备模式并按照Danamorah的答案找不到。所以我想帮助新手省些时间，并截屏标识出需要点击的图标，以便您可以测量尺寸。

首先，打开开发者工具，然后在左上角你应该会看到一个小平板电脑和手机形状的图标。点击它，你就可以通过像素计数来调整尺寸。

- iampre409

Answer 2

他们更改了展示此工具的方式，您可以在设备模式中找到它。

- Danamorah

Answer 3

这是一个错误: https://bugs.chromium.org/p/chromium/issues/detail?id=582421

Google Chrome 浏览器 beta 分支已经修复了此问题，该修复将会在下一个稳定版本（版本50）中发布。

暂时的解决方法是使用此书签:

javascript: (function() {
  var v = window,
    d = document;
  v.onresize = function() {
    var w = v.innerWidth ? v.innerWidth : d.documentElement.clientWidth,
      h = v.innerHeight ? v.innerHeight : d.documentElement.clientHeight,
      s = d.getElementById('WSzPlgIn'),
      ss;
    if (!s) {
      s = d.createElement('div');
      s.id = 'WSzPlgIn';
      d.body.appendChild(s);
      s.onclick = function() {
        s.parentNode.removeChild(s)
      };
      ss = s.style;
      ss.position = 'fixed';
      ss.top = 0;
      ss.right = 0;
      ss.backgroundColor = 'black';
      ss.opacity = '1';
      ss.color = 'white';
      ss.fontFamily = 'monospace';
      ss.fontSize = '10pt';
      ss.padding = '5px';
      ss.textAlign = 'right';
      ss.zIndex = '999999';
    }
    s.innerHTML = 'w ' + w + '<br />h ' + h;
  };
})();

- Nikita 웃

Answer 4

现在的方法已经不同以前那么方便了。但是你可以在开发者工具设置中打开标尺（通用选项卡，元素部分，勾选“显示标尺”）。

然后当你选择一个元素（body或html）时，你可以在浏览器的x和y上使用标尺来获取元素的大小。如果你的内容比浏览器更宽，那么这个大小将不会与你的浏览器窗口相同。 这很不方便，因为它不像以前一样在你调整大小时显示浏览器的大小。希望原始功能能够恢复。

*还发现，如果你在设备模式上切换，并在下拉菜单中选择响应式，你可以调整浏览器区域的大小并查看实时屏幕大小。

- IUJPJ