Explore a Site's CSS with Chrome DevTools CSS Overview

Jhey Tompkins: [0:00] Start by opening Chrome's developer tools, go to Settings, then Experiments, then enable CSS Overview.

[0:14] After restarting Chrome's developer tools, you will see a CSS Overview tab. Click Capture overview to start. The Overview tab gives you a summary of your page's CSS, along with details about Colors, Fonts, Unused declarations, and Media queries.

[0:34] We can see here, these are the colors I have used on jhey.dev. The colors are separated into different categories, such as Text color. Here, we can see the Fill colors that are used on icons and the avatar on my page.

[0:53] One interesting feature of the CSS Overview panel is being able to see Unused declarations for your CSS. These are declarations in your styles which have no effect. To show this feature in action, I've added an unused declaration to the local development version in my page. Here, vertical-align will have no effect and is essentially unused.

[1:17] Running the CSS Overview tool, shows me the Unused declaration, "Vertical alignment applied to element which is neither inline nor table-cell." Clicking the occurrences shows me the affected elements.

[1:33] In review, the new CSS Overview feature of Chrome's developer tools is a nifty way to get an overview of your page's CSS. Whether it be a quick summary, an overview of your page's colors, the font info for your page, checking if there are any unused declarations, or getting an idea of the media queries that are in play.