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

Posted on by:

nialljoemaher profile

Niall Maher

@nialljoemaher

Owner @ CodΓΊ, JavaScript Developer, mentor and a lifelong learner. Tweet @nialljoemaher

Discussion

pic
Editor guide
 

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

 

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

 

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

 
 

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

 

Oh nice, I never saw this before!

 
 

Wow, this is awesome!

 

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