~1 min read|
Chrome DevTools recently added an experimental new feature called CSS Overview which can provide really useful information on a site’s styles.
The overview works by creating a snapshot of the site and then reporting on:
There’s also a nifty overview at the top:
Since the feature is still experimental, accessing it involves a few extra steps:
⌘+⇧+p) and search for
Show Experiments, select
CSS Overviewand close the window (
Esc) / close Dev Tools
I used this new tool on my website to look into different media queries and ensure that I was using them consistently. I also found several instances where I was using the wrong color.
This seems like a really powerful feature for ensuring greater consistency across an application / site and I look forward to using it more and more.
Thanks to Umaar for initially pointing out this feature!
Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!