DEV Community

Debbie O'Brien
Debbie O'Brien

Posted on

CSS Overview for Chrome

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

Top comments (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! 馃榾