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

css google-chrome firebug firebug-lite
Dio Phung picture Dio Phung · May 27, 2013 · Viewed 7.4k times · Source

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

ralph.m picture ralph.m · May 27, 2013

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?

Related questions

Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More
How can I inspect and tweak :before and :after pseudo-elements in-browser?

I have created some fairly elaborate DOM elements with an :after pseudo-element, and I'd like to be able to inspect and tweak them in either Chrome Inspector or Firebug or equivalent. Despite this feature being mentioned in this WebKit/Safari …

Read More
Is it possible to emulate orientation in a browser?

As the title is it possible to emulate orientation in google chrome or firefox? Meaning somehow change the browser to support media query (orientation = (landscape or portrait)) I have a emulator for mobile, but I would like to have the …

Read More