DevTools Tips hero logo

DevTools Tips: Identify CSS improvelements

Published on

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. > 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.

Published on Improve article


Screen sharing improvements in Chrome 109


DevTools Tips: Faster DevTools navigation

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.