19

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.

1 Answer 1

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?

6
  • 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
    Commented May 28, 2013 at 2: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
    Commented May 28, 2013 at 3: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
    Commented Dec 5, 2013 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
    Commented Feb 10, 2014 at 9:36
  • It seems that this option is no more in Chrome.
    – aderchox
    Commented Apr 6 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.