DEV Community

Debbie O'Brien
Debbie O'Brien

Posted on

11

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)

Collapse
 
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 😍

Collapse
 
nemo011 profile image
Nemo

Thanks for the quick tip! 😀

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay