Google Chrome DevTool: Web Comics #1 CSS-Overview

If you don’t have time to read but want to know the core of this post. Find the quick read and comics 👇

A quick read about CSS Overview

Let’s see how to enable the CSS-Overview option in Chrome now

1. Open Developer tools (Command+Option+I on Mac; Control+Shift+I on Windows, Linux;)

2. Go to DevTool settings like below

3. On the Left-hand side click Experiments

4. Enable CSS Overview and then close settings. Now reload the Devtools

5.Now Click on the CSS Overview tab and you could see the magic now

You can see the Colors used in the Webpage and even you can click a color to see where it is implemented in the HTML part like below

Even you can go further by clicking the element like below to see the implementation

Similarly, you can see the fonts used in the Webpage like below

You can also view the unused declarations as well as the Media Queries that are used

The entire report is broken into different segments like Colors, Font info, Unused declarations, and Media queries with a single click.

It helps the front-enders and designers to get the information in no time

Congratulations 🏆

You have learned about CSS Overview and how to use it.

Catch you up in a new post till then Happy Learning!