How to Use the Chrome DevTools Coverage Tab to Find Unused CSS and JS

The Problem with Unused Code

Modern websites frequently load massive CSS frameworks and JavaScript libraries, even if a specific page only uses a fraction of that code. Browsers must download, parse, and evaluate all of this code before the page becomes interactive, which severely impacts load times and Core Web Vitals metrics (like First Contentful Paint and Interaction to Next Paint).

Finding exactly which lines of code are actually being used by the browser has traditionally been difficult. Fortunately, Google Chrome DevTools includes a built-in Coverage tab that acts as an X-ray for your website’s assets, highlighting exactly what code executed and what code was wasted.

How to Open the Coverage Tab

The Coverage tab is hidden by default in Chrome DevTools. To access it:

1. Open Google Chrome and navigate to the webpage you want to analyze.
2. Right-click anywhere on the page and select Inspect (or press Ctrl + Shift + I on Windows / Cmd + Option + I on Mac) to open DevTools.
3. Press Ctrl + Shift + P (Windows) or Cmd + Shift + P (Mac) to open the DevTools Command Menu.
4. Type Coverage into the search bar.
5. Select Show Coverage from the list of options.

The Coverage drawer will appear at the bottom of your DevTools window.

How to Record and Analyze Code Coverage

To get an accurate picture of what code is used, you must record a page load.

1. In the Coverage tab, click the reload icon (a circle with an arrow, tooltip: “Start instrumenting coverage and reload page”).
2. Chrome will reload the page and immediately begin capturing data as the assets are downloaded and executed.
3. Once the page is fully loaded, look at the Coverage table.

The table provides a breakdown of every CSS and JS file loaded on the page. Pay attention to the Unused Bytes column and the visual Usage Visualization bar. The bar uses color coding:

• Green: Code that was executed during the recording.
• Red: Code that was downloaded but never executed.

How to Inspect Specific Lines of Unused Code

The true power of the Coverage tab lies in its line-by-line breakdown.

Double-click any file listed in the Coverage table (for example, a large style.css file). The file will open in the Sources panel above the drawer.

Look at the gutter (the margin next to the line numbers) in the Sources panel. You will see colored bars next to the code:

• A Solid Green Line indicates the CSS rule or JS function was executed.
• A Solid Red Line indicates the CSS rule or JS function was completely unused on this page.
• A Half-Red, Half-Green Line (common in JavaScript) indicates that some code within that block executed, but other parts did not.

Important Considerations When Analyzing Coverage

Before you immediately delete all red-lined code, you must understand the limitations of the Coverage tab:

• State-Dependent Code: A CSS hover effect (:hover) will show up as red (unused) until you actually move your mouse over the element. Similarly, a JavaScript function tied to a button click will remain red until you click that button.
• Multi-Page Architecture: Code that is unused on the homepage might be critical for the checkout page. If you are using a global stylesheet, a high percentage of unused CSS on a single page is normal and preferable to breaking the stylesheet into dozens of un-cached fragments.

To get a more accurate reading, interact with the page while the Coverage tool is still recording (scroll down, open mobile menus, click tabs). The red lines will dynamically turn green as the browser executes the previously dormant code.