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

Tomasz Łakomy
InstructorTomasz Łakomy
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

egghead
egghead
~ 17 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today