DEV Community

loading...

Activate CSS Overview Tab in Chrome πŸ’»

nialljoemaher profile image Niall Maher ・1 min read

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

pic
Editor guide
Collapse
jacobgc profile image
Jacob Gee-Clarke

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 Author

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

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
Collapse
natterstefan profile image
Stefan Natter πŸ‡¦πŸ‡ΉπŸ‘¨πŸ»β€πŸ’»

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

Collapse
nialljoemaher profile image
Niall Maher Author

Oh nice, I never saw this before!

Collapse
provish profile image
Collapse
joeattardi profile image
Joe Attardi

Wow, this is awesome!

Collapse
mxldevs profile image
MxL Devs

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