Identify potential CSS improvements with the CSS Overview panel #DevToolsTips

Key Takeaways

[Music] use the css overview panel to better understand your pages css click capture overview the report shows the summary of your pages css followed by colors phone information unused decorations and media queries let's explore the color section together here the colors are grouped by usage like background colors and fill colors it also shows you the text that have low contrast issues let's say this color doesn't match the color scheme of your site click on it to get a list of elements that use the color you can open the element in the elements panel and fix the color there the unused decoration section lists down the style which have no effect for example these two declarations are unused because the height and width of an inline element are determined by its content clicking the occurrences to view the affected elements you can always clear the overview and rerun the report especially after applying your locker changes to learn more about the css overview panel go to google.girlsdev2 css overview see you for the next devtools tip [Music] you