18

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.

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 !).

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

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

Dio Phung
  • 5,944
  • 5
  • 37
  • 55

1 Answers1

8

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?

ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • My qn is basically how to know a particular CSS style come from which CSS files ? For e.g, I have 3 CSS files named "main.css", "client.css" and "mobile.css" that all have a class ".title-header". In the page, I loaded these 3 CSS files, how do I know which file is applied ? – Dio Phung May 28 '13 at 02:34
  • 2
    In the normal Elements panel (with HTML on the left and CSS on the right), at the top right of every style rule it shows you which file it's in and what line number it's on. – ralph.m May 28 '13 at 03:11
  • The problem with using the Computed tab is that I can't edit or disable individual styles like I can in the Styles tab. Firefox makes this easier. – isherwood Dec 05 '13 at 20:02
  • In some sense, @ralph.m 's answer is the best - it shows what CSS property is set by which .css file. Therefore I marked his as answer. – Dio Phung Feb 10 '14 at 09:36