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

Question

背景故事：我有一个包含多个相互覆盖的 CSS 的页面。有这么多划掉的 CSS 样式，所以我不想看到它们。

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

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

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

Answer 1

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