Google Chrome’s developer tools have some gems that often go overlooked by developers and designers. One of these tools we’ll be covering today is the Audit Tool. To make use of this overlooked feature, perform the following steps:
Properties > Tools > Developer Tools(or press
SHIFT + CTRL + I)
- Click on the
Auditstab within the
- Ensure the
Web Page Performanceoption is checked.
The resulting report will show you a bunch of useful information you can use to trim your bloated page down to a lean mean fighting machine. The resulting information will only show you a listing of CSS selectors that aren’t used on the current page. You still need to do the gruntwork of locating them in your stylesheet and removing the rules that you’re positive don’t apply under any circumstances or pages.
Prefer Firefox? Check out the Dust-Me Selectors plugin
If you’re still an avid fan of Firefox, there’s a solution for you as well. Sitepoint released a Firefox extension that’ll do the trick. It actually goes a step beyond Chrome’s Audit Tool. Dust-Me extracts all of the selectors from all of the stylesheets on the page you’re viewing. It then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered. Dust-Me gives you the option of testing pages individually or as an entire site. If you decide to test the site, it’ll spider the site and summarize a profile of which selectors aren’t in use anywhere.