Chrome DevTools: Understand the performance impact of your CSS with these CSS Tracker Enhancements

Thank you for voting on what I should include in my DevTools course!

The updated CSS Tracker in Canary has recevied some UI enhancements. More importantly, it provides valuable data on the size of your unused CSS so you can begin to quantify the performance impact this has on your users.

The CSS Tracker contains four columns:

• URL to the CSS resource
• Total Bytes
• Unused Bytes
• A visual line chart to give you a quick overview of the used/unused distribution

You can double click on any CSS entry within the Tracker Panel to see the CSS source code along with its used/unused status.

Update: CPU Throttling is in Chrome Stable!