CSS Coverage is a new development feature that will be available in the near future release of Firefox. A brief introduction for this was made by Angelina Fabbro at CSSConf US, 27th May 2014. The whole presentation is a worth of watching for any front end developer/designer.
Using it is pretty straight forward. While the Developer Tools open and the console active, the following steps will make it happen:
- Start by writing
csscoverage startin console and pressenter(key found in the keyboard) - Browse the web pages you wish to include in the coverage
- Stop the coverage collection by writing
csscoverage stopin the console and pressenter - The unused rules will be listed in the Style Editor tab of the Developer Tools
- The whole report can be viewed by writing
csscoverage reportin the console, followed byenterkey pressing.
By the time of writing there is still no expected release number when the CSS Coverage feature would become available. It might be worth following the Developer Tools release notes from time to time. There are many other new and useful features landing on every release.