Chrome DevTools: CSS Coverage, track CSS rules usage while recording a Timeline profile

Last updated: November 11, 2016
CSS Coverage, track CSS rules usage while recording a Timeline profile

You can enable the DevTools experiment named "Track CSS rules usage while recording Timeline" to get new CSS Coverage tooling. This feature answers a question: What CSS is unused on my page, even during page interaction.

To use this feature:

  1. Check CSS Coverage in the Timeline panel
  2. Make a recording and interact with parts of the page you want to capture in your analysis
  3. Go to your CSS file in the Sources Panel and observe the unused CSS line markings

This even works with minified code after you pretty print it.

Update: Sources Colour Picker is now in Chrome Stable!

Sign up to receive a developer tip, in the form of a gif, in your inbox each week