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

Comments

[Jacob]

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

[Niall Maher]

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

[Joe Attardi]

Wow, this is awesome!

[Tom]

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

[Matheus de Campos]

Awesome!

[Stefan Natter 🇦🇹👨🏻‍💻]

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

[Niall Maher]

Oh nice, I never saw this before!

[Vishal Gupta]

Cool.

[MxL Devs]

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

[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