DEV Community

Niall Maher
Niall Maher

Posted on

Activate CSS Overview Tab in Chrome 💻

There's a cool new feature in Chrome. It's in the "experimental" features so it's still in development.

Steps to activate it you:

  • Open the dev tools - Command+Option+I on Mac & Control+Shift+I on Windows.
  • Click the settings button (it looks like a big cog).
  • Click the "Experiments" tab.
  • Check the "CSS Overview" option. ✅
  • Close the menu (and you may need to reopen the dev tools).
  • Check out a shiny new "CSS Overview" tab.

Now to use it all you have to do is click "Capture Overview" to get the overview of any page.

I hope this tip helped and until the next one, happy coding! 💜


Follow me on Twitter

Subscribe on Codú Community

Top comments (10)

Collapse
 
jacobgc profile image
Jacob • Edited

Just to add, you'll need to enable the flag for dev tools experiments. chrome://flags/#enable-devtools-ex...

Collapse
 
nialljoemaher profile image
Niall Maher

I didn't see anything to enable this so this awesome! Thanks for sharing

Collapse
 
joeattardi profile image
Joe Attardi

Wow, this is awesome!

Collapse
 
tomavgeek profile image
Tom

That's a new feature I didn't know about, and looks pretty cool, thanks for that!

Collapse
 
makampos profile image
Matheus de Campos

Awesome!

Collapse
 
natterstefan profile image
Stefan Natter 🇦🇹👨🏻‍💻

Cool, thanks for sharing Niall (and Jhey). Reminds me of cssstats.com/.

Collapse
 
nialljoemaher profile image
Niall Maher

Oh nice, I never saw this before!

Collapse
 
provish profile image
Vishal Gupta

Cool.

Collapse
 
mxldevs profile image
MxL Devs

That "unused declarations" is probably going to be so useful for me lol

Collapse
 
sivaramkumar2002 profile image
VENKATA SIVA RAM KUMAR CHANDRA

Can anyone help me there is no CSS OVERVIEW option for me to tick on it in experiments section. I want this feature real bad, please help me