Use Chrome Devtools' CSS Overview to debug the CSS Design of a website
Chrome Devtools can be really powerful, when it comes to debug JavaScript, inspect DOM nodes and their properties as well as CSS styling. in this lesson we're quickly having a look at the "CSS Overview" feature of Chrome Devtools, that allows you to debug the CSS design of a website, starting from the used color palette, fonts and much more.
Instructor: [0:00] I'm here on this Tailwind website, which has become famous for its new approach to styling websites, but you can open any websites you'd like. What we want to have a look at is on some experiment in Chrome DevTools.
[0:15] If you open the Chrome DevTools here, you can go to the preferences button here that opens up the settings of the Chrome DevTools, where you can customize experience, do some more configurations down here, even device debugging. One thing you can also do is activate such experiments.
[0:33] As the time of this recording, there is a new experiment in there, which is the CSS overview. Let's enable that. We close here the settings, and we have to reload the DevTools in order to have an effect.
[0:46] What you see now is we got that CSS overview tab among all the other tabs which we already have, as you can capture the overview of the specific website here. What that gives you is a nice way to debug the actual styling and design of the website.
[1:02] First of all, in the overview section, you see how many elements there are, how many style sheets, inline styles, and a couple of other statistics, which might be useful to get a quick glance of what is going on on the website.
[1:13] Then, we see the colors, which you can also see by going here in this colors tab. You see the different background colors that are being used, as well as the text colors. A very cool part also is that you can click on this, and it will give you the elements that use those.
[1:29] For instance, we can go and click on element, which then reveals some in the elements panel, and we could scroll into the view, and then you can see the text element that gets exactly the color applied by the style sheet.
[1:44] This is a very interesting way to debug websites, but it might not only be for debugging websites, but also for your own website itself, like in terms of optimizing websites for, for instance, the fonts, which you can see in the font info here.
[1:57] Here you see, for instance, the different fonts that are being used, the different font sizes, font weights. You can have a look on how many of those are being used, where they are actually being used, and therefore optimize. You may reduce the number of fonts to optimize your performance.
[2:11] There is also an unused declarations section, which helps debugging unused pieces in your CSS paths, as well as where media queries are being used.