chrome dev tools: css overview

Chrome DevTools recently added an experimental new feature called CSS Overview which can provide really useful information on a site’s styles.

The overview works by creating a snapshot of the site and then reporting on:

• Colors
• Fonts
• Unused declarations
• Media queries

There’s also a nifty overview at the top:

Accessing the CSS Overview

Since the feature is still experimental, accessing it involves a few extra steps:

1. Open Dev Tools (⌘+⌥+i)
2. Open the Command Palette (⌘+⇧+p) and search for Show Experiments, select CSS Overview and close the window (Esc) / close Dev Tools
3. Open the Command Palette again and now search for CSS Overview.

Wrap Up

I used this new tool on my website to look into different media queries and ensure that I was using them consistently. I also found several instances where I was using the wrong color.

This seems like a really powerful feature for ensuring greater consistency across an application / site and I look forward to using it more and more.

Thanks to Umaar for initially pointing out this feature!