Here’s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations… even down to the total number of defined media queries.
Again, this is an experimental feature. Not only does that mean it’s still in progress, but it means you’ll have to enable it to start using it in DevTools.
- Open up DevTools (
- Head over to DevTool Settings (
- Click open the Experiments section
- Enable the CSS Overview option
And, oh hey, look at that! We get a new “CSS Overview” tab in the DevTools menu tray when the settings are closed. Make sure it’s not hidden in the overflow menu if you’re not seeing it.
Notice that the report is broken out into a number of sections, including Colors, Font info, Unused declarations and Media queries. That’s a lot of information available in a small amount of space right at our fingertips.
This is pretty nifty though, huh? I love that tools like this are starting to move into the browser. Think about how this can help us not only as front-enders but also how we collaborate with designers. Like, a designer can crack this open and start checking our work to make sure everything from the color palette to the font stack are all in tact.
Looks like an amazing feature
This feature reminds me of Project Wallace! A pretty interesting tool with loss of detail and constant development for extra features (it has a CLI tool as well)
Ooh, that’s REALLY nice – how long has that been in there?
That is… AWESOME!!
Love that…. thnak you for sharing :)
Awesome, it look great.
Yes! very powerful.Thank you!
Heads up for anyone here after December 2021:
CSS Overview is no longer in Experiments. It’s now available in the “More tools” submenu under the “⋮” menu