Chrome 开发工具可以显示元素大小的来源或原因吗？

Posted 2023-03-07

【中文标题】Chrome 开发工具可以显示元素大小的来源或原因吗？

【英文标题】：Can Chrome Dev-tools show the source or reason for an element's size?

【发布时间】：2018-07-18 10:44:06

【问题描述】：

当在 Chrome 开发者工具的元素窗口中选择一个元素时（从 Chrome 63 开始），计算选项卡将显示当前计算的宽度和高度，以及任何其他非默认属性。

但据我所知，如果元素的大小不是直接到期的，它并没有描述、解释或揭示元素框大小的来源或原因直接设置属性，或属性继承或级联。

考虑这个例子：

<div id="div1">
    <p id="p1">Lorem ipsum</p>
</div>

使用默认的 html5 样式表（即div, p display: block;），Chrome 将显示#div1 和#p1 的计算宽度和高度相同，但没有说#div1 的高度是由@ 引起的987654326@，也不是#p1的高度是由其内容引起的（还要考虑line-height、font-size等相关属性）。

如果样式表改成这样：

#div1  height: 500px; 
#p1  height: 75%; overflow: hidden; 

...那么开发者工具窗口应该提供一些指示，表明#div1 的高度直接来自height: 500px; 属性，而#p1 的高度现在来自#div1 而不再是它的内容。

此功能是否存在于 Chrome 开发者工具甚至 javascript 工具中？

【问题讨论】：

我非常想要这个功能！我总是有一些尺寸或位置错误的元素，并且弄清楚为什么（宽度/高度？最大宽度/高度？内容大小？CSS 网格？flexbox？绝对/相对？SVG 视图框？）如此痛苦。能够在工作时检查尺寸/定位引擎真是太棒了。

【参考方案1】：

您可以单击一个向下的三角形来查看计算值的来源。我认为您无法看到所有父容器的设置。

【讨论】：

是的，不幸的是，它仅在计算值源自该元素上的属性集而不是后代或父元素时才显示。如果 Chrome 完全没有这个功能，那么使用 FlexBox 和 CSS Grids 就会变得更加困难，因为它们会引入更多的情况，即元素的大小在 DOM 的其他地方定义。

@Dai 你绝对应该使用 Firefox 来调试网格，因为CSS Grid Inspector。

这仅适用于 CSS 网格 - 不适用于 CSS Flexbox、浮动或元素的宽度源自祖先或后代元素上的规则集时。