Chrome developer tools - how can I see that CSS is being used by the current page?

Question

Using the Google Chrome Developer Tools, I sometimes run checks on my code to find out how it is built. One suggestion these tools always make is "Removed Unused CSS Rules." By clicking on the arrow, you will usually see a huge list of CSS rules that are not used by the current page.

Is there a way to see a list of CSS rules used by the current page?

Answer 1

I know this may be a little late, but in case someone else stumbles upon it, like me, I am also curious that I found that the Dust-Me Selectors add -on for firefox will tell you both used and unused selectors per page for each used stylesheet.

Hope this helps

Answer 2

Press CTRL-SHIFT-J to access Chrome dev tools. There you can select the resource tab, select enable them on the left and refresh the page if necessary. It will show all downloaded files, including style sheets.

Answer 3

Developer tools are open source, so you can create a patch.
http://dev.bootstraponline.com/2011/11/automatically-remove-unused-css-rules.html

Snipp

//=== modified file 'AuditRules.js' if (!testedSelectors[rule.selectorText] || foundSelectors[rule.selectorText]) { usedCss += "\n" + rule.selectorText + " {" + rule.style.cssText + "}\n"; continue; } //... // Save only used css rules. InspectorFrontendHost.saveAs("used.css", usedCss);