Css Chrome开发工具能否显示元素的来源或原因'；s码？

当在Chrome Developer Tools（从Chrome 63开始）的“元素”窗口中选择元素时，“计算”选项卡将显示当前计算的宽度和高度以及任何其他非默认属性

然而，据我所知，如果一个元素的大小不是直接由一个直接设置的属性、属性继承或级联造成的，它不会描述、解释或揭示元素框大小的来源或原因

考虑这个例子：

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

…然后开发人员工具窗口应该提供一些指示，表明

#div1

的高度直接来自

高度：500px

属性，而

#p1

的高度现在来源于

#div1

而不再是其内容

---

Chrome Developer工具或JavaScript工具中是否存在此功能？

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

---

是的，不幸的是，它仅在计算值是从该元素的属性集派生时显示，而不是从子元素或父元素派生时显示。如果Chrome完全没有这一功能，那么使用FlexBox和CSS网格将更加困难，因为它们会引入更多的情况，其中元素的大小在DOM的其他地方定义。@Dai您肯定应该使用Firefox来调试网格，因为这只适用于CSS网格，而不是CSS FlexBox、float、，或者当一个元素的宽度是从一个祖先或后代元素的规则集派生出来的时候。我非常想要这个功能！我总是有一些元素的大小或位置不正确，弄清楚为什么（宽度/高度？最大宽度/高度？内容大小？CSS网格？flexbox？绝对/相对？SVG viewBox？）如此痛苦。如果能够在发动机工作时检查其尺寸/定位，那就太棒了。

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