Use (experimental) CSS Overview in Chrome to get an overview of CSS used on a site

Style console.log messages with CSS

Use Logpoints to log messages without cluttering up your code with console.log() statments

Run a Lighthouse audit in Chrome Devtools

Choose accessible colors for text using Chrome DevTools Color Picker contrast ratio score

Use Chrome DevTools console utilities to make debugging easier

Force a DOM element state in Chrome DevTools

Copy a network request as fetch or cURL with Chrome DevTools

Chrome DevTools tips & tricks

In this quick lesson we're going to learn how to use the (experimental) CSS Overview feature in Google Devtools to get a quick overview of all the CSS used on the site:

- how many elements there are on a page
- how many colors (and their values!)
- the number of media queries
- which fonts are used and where
- and more!

Tomasz Łakomy: [0:00] Imagine that you open up a website such as Google, and you would like to get an overview of what kind of fonts are they using? What kind of colors are they using? What kind of media queries do they have on this website?

[0:11] Of course, you can do that manually using the elements tab. If I go ahead and select a button, I can see that, for instance, they're using this background color, but doing so element by element is going to take quite a bit of time, and it would be useful to have some kind of overview.

[0:26] That's why, there's an experimental feature in Google Chrome, which is called CSS Overview. To enable it, click on the Settings icon over here. Next up, click on Experiments, and check the CSS Overview checkbox.

[0:39] Once you do that, there's a new CSS Overview tab. After you click on it, you can click over here in order to capture the overview of this page. Now, we know everything about this page from a CSS perspective.

[0:51] Here in the summary section, we can see how many elements there are, how many style rules, how many media queries and so on are used on google.com home page.

[1:00] If I click on the colors tab, we can see what colors are used on this page. You can see that those colors are organized by background, text, field, and border. Next up, there's the font info, which tells you all about what kind of fonts are they using on this page.

[1:15] Two last sections are unused declarations, which allows you to optimize your CSS and media queries. This section can be quite useful if you're building your own app, and you're trying to see whether you have too many media queries because it might get difficult to maintain.

Course

Chrome DevTools tips & tricks

Use (experimental) CSS Overview in Chrome to get an overview of CSS used on a site

Share this video with your friends