How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

Question

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.

Answer 1

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?