CSS Coverage is a new development feature that will soon be available in a forthcoming release of Firefox. A concise introduction was provided by Angelina Fabbro at CSSConf US, May 27, 2014. The presentation is highly recommended for front-end developers and designers.
Here’s how to use it: While having the Developer Tools open and the console active, follow these steps:
- Type
csscoverage start
into the console and hitenter
. - Navigate through the web pages you want to include in the coverage.
- Stop the coverage collection by typing
csscoverage stop
in the console and hittingenter
. - The unused CSS rules will be displayed in the Style Editor tab of the Developer Tools.
- For a comprehensive report, enter
csscoverage report
into the console and pressenter
.
At present, no specific release date has been set for when the CSS Coverage feature will be available. Monitoring the Developer Tools release notes periodically could keep you updated on its progress. Remember, each Firefox release introduces numerous beneficial features.