如何在Chrome Developer Tools中查找任何元素的计算大小?

Sco*_*t B 8 css google-chrome developer-tools

我确定这是开发人员工具检查器中的某个地方,但我找不到它.对于给定的元素(例如,div),我会在哪里找到我右键单击并选择"Inspect Element"的给定元素的计算尺寸(高度和宽度)?

Abh*_*Das 14

只需将鼠标悬停在开发人员工具面板下方功能区中的元素名称上即可.相应的元素将在浏览器窗口中突出显示,尺寸显示在它的一角.此外,如果向下滚动开发人员工具中的右侧窗格,您将看到"度量标准"窗口,该窗口将为您提供计算的尺寸以及边距,填充,边框等.

这是包含您的SO问题的div维度的屏幕截图.当我将鼠标悬停在底部的div名称上时,请注意突出显示区域左下角的尺寸.右侧是"度量标准"窗口.

计算尺寸截图

点击这里查看大图

对于将来的问题,请先参考Google的优秀文档.

  • 在版本"46.0.2490.86 m"中,没有"Computed styles",Metrics窗口显示100%x 100%.:( (3认同)
  • Google 文档链接现已损坏。现在可以在 https://developer.chrome.com/devtools 找到页面 (2认同)