CODEWITHSUNDEEP
cssbrowsergoogle-chrome
sscirrus
sscirrus

Reputation: 56709

Chrome developer tools - any way to see what CSS is used by the current page?

Using Google's Chrome Developer Tools, I sometimes run audits on my code to see how it is coming together. One of the suggestions those tools always make is "Removed Unused CSS Rules". Clicking on the arrow then shows a usually huge list of the CSS rules that are not being used by the current page.

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

Upvotes: 6

Views: 4872

Answers (3)

GDmac
GDmac

Reputation: 880

The 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);

Upvotes: 0

sbditto85
sbditto85

Reputation: 1545

I know this may be a tad late but in case someone else stumbles across this like I did and is also curious I found the Dust-Me Selectors add-on for firefox will tell you both the used and unused selectors on the page for each stylesheet used.

Hope this Helps

Upvotes: 4

plebksig
plebksig

Reputation: 535

Press CTRL-SHIFT-J to access Chrome's dev tools. There you can choose resources tab, choose to enable them on the left and refresh the page if necessary. It will show all loaded files, including stylesheets.

Upvotes: -1

Related Questions