DevTools Tips: Identify CSS improvements
Stay organized with collections
Save and categorize content based on your preferences.
The CSS Overview panel in DevTools lets you find potential CSS improvements on your page at a glance.
To get a report, open DevTools >
> More tools > CSS Overview and click Capture overview.
The report shows you several sections:
- A summary with statistics on styles, selectors, and media queries.
- A breakdown of used colors including contrast issues—the most common issues on the web.
- A breakdown of used fonts with statistics on size, weight, and line height.
- Unused CSS declarations.
- Statistics on media queries sorted by number of occurrences in descending order.
For a more hands-on learning experience, see CSS Overview: Identify potential CSS improvements.
To learn more on contrast issues, see Make your website more readable.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2022-11-23 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2022-11-23 UTC."],[],[]]