CSS Coverage in Firefox

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:

  1. Start by writing csscoverage start in console and press enter (key found in the keyboard)
  2. Browse the web pages you wish to include in the coverage
  3. Stop the coverage collection by writing csscoverage stop in the console and press enter
  4. The unused rules will be listed in the Style Editor tab of the Developer Tools
  5. The whole report can be viewed by writing csscoverage report in the console, followed by enter key 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.