DEV Community

The css chrome dev tool you didnt know of

Did you know that chrome dev tools has a css overview panel to identify flaws inside your css?

Edit:

You may first need to enable that feature because its an experimental feature.

  • First open your Dev-Tools settings(the ⚙️ on the right or Press F1)
  • Go to Experimental
  • here you should find the checkbox "CSS Overview" Image description

You can find it when you open your dev-tools in chrome (F12) and than More options() More > More tools > CSS Overview.

Image description

Here you can get an high level overview of you page's css

Image description

In the colors section you can see all the colors you used and it even indicates bad contrasts in your css.

Image description

I hope you learned something just as i did =)

✅ If you liked this post, you may like
my 🏠 blog or even want to
connect 💬 on twitter 📢 for more information about building web applications or saas development or 💻 software development in general.

Discussion (3)

Collapse
lukeshiru profile image
LUKESHIRU

Yup, this was shared by the Chrome Dev team recently:

Cheers!

Collapse
adeniyibello88 profile image
Adeniyi Bello

Is it the same method with windows?

Collapse
harsvnc profile image
Hrn Svncハルン Харун Севиндж Author

Yes on windows it is the same. You maybe need to activate it in devtools under experimental functions.