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

Discussion (9)

jacobgc profile image
Jacob • Edited

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

nialljoemaher profile image
Niall Maher Author

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

tomavgeek profile image

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

makampos profile image
Matheus de Campos


natterstefan profile image
Stefan Natter πŸ‡¦πŸ‡ΉπŸ‘¨πŸ»β€πŸ’»

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

nialljoemaher profile image
Niall Maher Author

Oh nice, I never saw this before!

provish profile image
Vishal Gupta


joeattardi profile image
Joe Attardi

Wow, this is awesome!

mxldevs profile image
MxL Devs

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