Google Chrome recently unlocked a new feature in Dev Tools. It’s called CSS overview, and it’s impressive.
The tool allows you to snoop on other websites their CSS. It shows their fonts, colors, and media queries.
After opening Google Chrome, I couldn’t find this feature. So I started searching.
How to unlock CSS overview
- Open Google Chrome
- Open Dev Tools (this can be done by right-clicking and selecting inspect element)
- Click on the cogwheel in the top right
- Navigate to Experiments in the left sidebar
- Click on CSS overview
There you go, you’ve now unlocked the new feature!
What does CSS overview in Chrome do?
Right now, you can capture five different things with CSS overview.
- An overview summary of the CSS used
- The colors the website uses
- Font info
- Unused declarations
- Media queries
I love the color window, as I’ve spent too much time inspecting elements to know the exact HEX color value of a component.
