为什么 Chrome 开发者工具有时不显示 CSS 源代码？答案

【问题标题】：Why does Chrome developer tools sometimes not show a CSS source?为什么 Chrome 开发者工具有时不显示 CSS 源代码？
【发布时间】：2013-10-26 04:49:12
【问题描述】：

为什么 Chrome 开发者工具的右下角有时会在 CSS 源代码上显示一个三角形（表示 - 如果您点击它 - CSS 源代码），如我的屏幕截图中的 width ...

但有时不是......就像我的屏幕截图中的 height 一样。

换句话说，我怎么知道设置 height=575px 是什么？

【问题讨论】：

【解决方案1】：

我遇到了同样的问题，我登陆了这个页面，经过一番摸索后，我意识到因为我的 css 源文件已经被缩小，开发工具无法检测到该行，因为显然只有一行，所以这也可能是您的问题的原因。

【讨论】：

【解决方案2】：

您在此处选择了“计算”选项卡，这意味着 Chrome 会告诉您所有部件的计算大小。这意味着您看到的内容并非全部由 css 文件明确设置，而是可能由元素的内容派生而来。

如果您希望仅查看提供的 css 样式，请选择窗口顶部的“样式”选项卡。

【讨论】：

【解决方案3】：

在这种情况下，元素似乎没有指定的 CSS 高度应用于它。它是由浏览器根据它所包含的东西的大小来计算的，例如容器 div、浏览器窗口等。

【讨论】：

谢谢。 Chrome 的开发者工具（或任何其他浏览器）中是否有任何功能可以显示这是如何确定的？
我不知道有什么办法可以看到。一个很好的例子说明为什么会如此困难，就是查看代码以供您发表评论。有一个被“div”包围的“span.comcopy”。要计算 div 高度，它会考虑跨度的高度。在我的屏幕上，我将您的评论视为两行，因此高度为 34 像素（两行，行高 17 像素）。我不确定开发工具是否有任何直接的方式来描述这一点，但如果有希望有人已经或将会弄清楚。