CSS Overview for Chrome

debs_obrien profile image Debbie O'Brien ・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


markdown guide

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 😍


Thanks for the quick tip! πŸ˜€