/dev tips

🎊   Announcing the new DevTools Pre Launch ModernDevTools.com - A discount, and no subscription fees during this pre-launch period   🎊

(120) Draw your webpage with the Paint Profiler Built in Terminal (122)

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

11 Nov 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.