DEV Community


CSS Overview for Chrome

Debbie O'Brien
Head Developer Advocate at Bit, speaker, writer, teacher, open source contributor, vue, nuxt, react, webpack
・1 min read

CSS Overview for Chrome is a great feature that lets you check what colours and fonts you are using on your site. Sometimes we don't realise how many shades of grey we have. Having a panel in the dev tools so that we can easily check this is pretty cool.

It also checks what media queries you have and any unused declarations 👀.

CSS Overview

To set it up:

  • open dev tools
  • click on the settings icon
  • click on experimental
  • select CSS Overview
  • close dev tools
  • reopen dev tools

You will now see a new panel in your dev tools called CSS Overview.

This feature is experimental and might change or even better, might improve over time. Enjoy

Discussion (2)

mornir profile image
Jérôme Pott

Oh! That's good to know. I activated it and it works great!
I thought it would allow me to see which font was being rendered when selecting text. I've taken the habit of opening Firefox devtools for that.
Update: I've just noticed that this information was actually provided in the tooltip when hovering HTML elements in Chrome.

I'm also looking for the enhanced CSS Grid support in devtools 😍

nemo011 profile image

Thanks for the quick tip! 😀