paazmaya.fi

The Website of Juga Paazmaya | Stories about web development, hardware prototyping, and education

CSS Coverage in Firefox

Every byte counts, so does every unused CSS rule add to those bytes, thus should be removed

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:

  1. Type csscoverage start into the console and hit enter.
  2. Navigate through the web pages you want to include in the coverage.
  3. Stop the coverage collection by typing csscoverage stop in the console and hitting enter.
  4. The unused CSS rules will be displayed in the Style Editor tab of the Developer Tools.
  5. For a comprehensive report, enter csscoverage report into the console and press enter.

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.