How to Find and Remove Unused CSS and JavaScript in Chrome DevTools Using the Coverage Tool

Modern frontend web development frameworks, third-party analytics libraries, and utility CSS packages frequently bundle thousands of lines of code that are never executed during an initial page render. Unused CSS rules inflate styling stylesheets, while uncalled JavaScript routines consume valuable network bandwidth and force mobile browsers to waste CPU cycles parsing dead code.

Google Chrome DevTools includes a built-in Coverage tool designed to measure code utilisation in real time. By tracking exact byte-by-byte execution of CSS stylesheets and JavaScript bundles during page lifecycle events, the Coverage tool highlights redundant code blocks and helps developers optimise Core Web Vitals such as Total Blocking Time (TBT) and Interaction to Next Paint (INP).

Opening the Coverage Tool in Chrome DevTools

Because the Coverage tool is not docked on the primary DevTools navigation bar by default, access it via the command menu or drawer:

1. Open Google Chrome and navigate to the web page you want to audit.
2. Press F12 (or Ctrl + Shift + I on Windows/Linux, Cmd + Option + I on macOS) to launch DevTools.
3. Press Ctrl + Shift + P (or Cmd + Shift + P on macOS) to open the DevTools Command Menu.
4. Type coverage into the search box and select Show Coverage from the results.

The Coverage panel docks into the bottom drawer panel of DevTools, displaying a blank audit ledger with recording controls.

Recording and Analysing Code Utilisation

To capture code execution metrics across page loading and user interactions:

1. In the Coverage panel, click the Start instrumenting coverage and reload page button (represented by a reload icon).
2. Chrome performs a hard reload of the target web page, capturing network payloads and profiling CSS and JavaScript execution as scripts parse.
3. Interact with the web page—click dropdown menus, scroll through image carousels, and trigger modal dialogues—to allow lazily evaluated event handlers to register.
4. Click the red Stop instrumenting coverage button when testing concludes.

Interpreting Coverage Metrics and Visual Bars

The Coverage table displays a comprehensive breakdown of all loaded assets:

• URL: The file path of the stylesheet, bundled script, or inline HTML document.
• Type: Identifies the asset as either CSS or JavaScript (JS).
• Total Bytes: The uncompressed size of the resource in kilobytes.
• Unused Bytes: The exact byte count that remained unexecuted during the session.
• Usage Visualisation Bar: A proportional bar indicating consumed code (blue) versus unexecuted dead code (red).

Assets showing red usage proportions above 60% indicate prime targets for code-splitting, tree-shaking, or dynamic asynchronous imports.

Inspecting Line-by-Line Code Coverage in the Sources Panel

To inspect exactly which CSS selectors or JavaScript functions are unused:

1. Double-click any asset listed in the Coverage ledger.
2. Chrome DevTools immediately opens the file in the Sources panel.
3. Review the margin markers to the left of the line numbers:
   • Cyan/Green vertical bar: Indicates code that executed or styles that were applied to active DOM elements.
   • Red vertical bar: Indicates unused CSS rules or JavaScript functions that loaded into memory but were never called.

Remediating Unused CSS and JavaScript Bloat

Once redundant assets are identified, implement the following architectural solutions:

• Extract Critical CSS: Separate above-the-fold styling rules from secondary component styles, inlining critical rules directly into the document <head> and deferring remaining stylesheets.
• Dynamic Imports: Refactor large JavaScript modules (such as heavy charting libraries or export engines) using dynamic import() statements so they load only when users trigger corresponding interface buttons.
• Bundle Tree-Shaking: Audit build configurations in Webpack, Vite, or Rollup to ensure dead exports are eliminated during production compilation.