Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

CSS Overview: Identify potential CSS improvements

Published on

Use the CSS Overview panel to better understand your page's CSS and identify potential improvements.

This is a preview feature in Chrome 96. Our team is actively working on this feature and we are looking for your feedback for further enhancements.

Open the CSS Overview panel

  1. Open any web page, such as this page.

  2. Open DevTools.

  3. Select More. Customize and control DevTools > More tools > CSS Overview.

    CSS Overview in the menu.

    Alternatively, use the Command Menu to open the CSS Overview panel.

    Show CSS Overview command in the Command menu.

Run and re-run a CSS Overview report

  1. Click the Capture overview button to generate a CSS Overview report of your page.

    Capture CSS Overview.
  2. To re-run a CSS Overview, click the Clear. Clear overview icon and repeat the first step.

    Clear overview.

Understand the CSS Overview report

The report consists of five sections:

  1. Overview summary. A high level summary of your page's CSS. Overview summary.

  2. Colors. All the colors on your page. The colors are grouped by types, such as background colors, text colors, etc. This sections also shows you texts that have low contrast issues.

    Colors.

    Each color is clickable. For example, suppose the #DADCE0 border color doesn't match the color scheme of your site. To get a list of elements that use this color, click the color.

    A list of elements that use the color.

    To highlight the element on the page, hover over the element in the list.

    Hover over an element to highlight the element on the page.

    To open the element in the Elements panel, click the element in the list.

  3. Font info. All the fonts on your page and their occurrences, grouped by different font size, font weight, and line height. Similar to the Colors section, to view the list of affected elements, click their occurrences.

    Font info.
  4. Unused declarations. All the styles that have no effect, grouped by reason.

    Unused declarations.

    For example, the two declarations above are unused because the content determines the height and width of an inline element. To view the corresponding elements, click the occurrences.

  5. Media queries. All the media queries defined on your page, sorted by number of occurrences in descending order. To view the list of affected elements, click their occurrences.

    Media queries.

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.