如何在 Chrome 开发者工具中过滤和仅显示应用的 CSS（如 Firefox 中的 Firebug）答案

【问题标题】：How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)如何在 Chrome 开发者工具中过滤和仅显示应用的 CSS（如 Firefox 中的 Firebug）
【发布时间】：2013-05-27 09:29:33
【问题描述】：

背景故事：我有一个包含多个相互覆盖的 CSS 的页面。划掉的 CSS 样式太多了，我不想看到。

我知道 Firefox 上的 Firebug 提供了这个功能（仅显示应用的 CSS），它可以显示正在应用的 CSS 文件中的 CSS 样式（整洁！）。

我们如何在 Chrome 上拥有此功能？我尝试为 Chrome 安装 Firebug Lite，但没有成功。

PS：Chrome 有 Computed Style 选项卡，但它不显示什么样式来自什么 CSS 文件。

【问题讨论】：

标签： css google-chrome firebug firebug-lite

【解决方案1】：

在 Chrome 开发工具的右侧列中（CSS 显示在元素面板中），第一部分称为“计算样式”。如果您取消选择“显示继承”，您将获得一个整洁的列表，其中包含实际应用于该元素的样式。这有帮助吗？

【讨论】：

我的qn基本上是如何知道一个特定的CSS样式来自哪些CSS文件？例如，我有 3 个名为“main.css”、“client.css”和“mobile.css”的 CSS 文件，它们都有一个类“.title-header”。在页面中，我加载了这3个CSS文件，我怎么知道应用了哪个文件？
在普通的元素面板中（左侧是 HTML，右侧是 CSS），在每个样式规则的右上角，它会显示它所在的文件以及所在的行号。跨度>
使用计算选项卡的问题是我不能像在样式选项卡中那样编辑或禁用单个样式。 Firefox 让这一切变得更容易。
在某种意义上，@ralph.m 的答案是最好的——它显示了哪个 CSS 属性是由哪个 .css 文件设置的。因此我将他标记为答案。