如何在Chrome开发人员工具中过滤和显示仅应用的CSS（如Firefox中的Firebug） [英] How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

问题描述

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

Background story: I have a page with multiple CSS that override each other. There are so many crossed out CSS style, so I don't want to see them.

我知道Firefox上的Firebug提供此功能（仅显示应用的CSS），其中可以显示CSS文件在应用什么CSS样式（整洁！）。

I know Firebug on Firefox provide this feature (Only Show Applied CSS), which can show what CSS style in what CSS file is being applied (neat !).

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

How do we have this feature on Chrome ? I tried install Firebug Lite for Chrome but no luck.

PS：Chrome有Computed Style标签，但没有显示CSS文件的风格。

PS: Chrome have Computed Style tab, but it does not show what style come from what CSS file.

推荐答案

在Chrome开发工具的右栏（其中CSS显示在Elements面板中）中，第一部分被称为计算风格。如果取消选择show inherited，则会获得实际适用于元素的样式的整齐列表。这有帮助吗？

In the Chrome dev tools, in the right hand column (where CSS is shown in the Elements panel), the first section is called "Computed Style". If you deselect "show inherited", you get a neat list of the styles that actually apply to the element. Does that help?

这篇关于如何在Chrome开发人员工具中过滤和显示仅应用的CSS（如Firefox中的Firebug）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！