Coverage: Find unused JavaScript and CSS

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

TheCoverage panel helps you find unused JavaScript andCSS code. Removing unused code can speed up your page load and save the mobile data of your users.

Analyzing code coverage.

Caution: Finding unused code is relatively easy. In contrast, refactoring the codebase so that each page contains only the necessary JavaScript and CSS can be difficult. This guide doesn't cover how to refactor your codebase to avoid unused code. Such refactoring highly depends on your technology stack.

Overview

Shipping unused JavaScript or CSS is a common problem in web development.For example, suppose that you want to useBootstrap's button componenton your page. To use the button component you need to add a link toBootstrap's style sheet in your HTML, like this:

...<head>  ...  <link rel="stylesheet"        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"        crossorigin="anonymous">  ...</head>...

This style sheet doesn't just include the code for the button component. Itcontains the CSS forall of Bootstrap's components. But you're not usingany of the other Bootstrap components. So your page is downloading a bunch ofCSS that it doesn't need. This extra CSS is a problem for the followingreasons:

  • The extra code slows down your page load. SeeRender-Blocking CSS.
  • If a user accesses the page on a mobile device, the extra code uses uptheir mobile data.

TheCoverage panel lets you record your page and view a report of the total used and unused bytes of CSS and Javascript resources, and track the code in theSources panel.

Open the Coverage panel

  1. Open Devtools.
  2. Open the Command Menu.

  3. Start typingcoverage, select theShow Coverage command, and thenpressEnter to run the command. TheCoverage panel opens intheDrawer.

    The Coverage panel.

Alternatively, in the top right corner, selectmore_vertMore options >More tools >Coverage.

Record code coverage

To capture code coverage:

  1. To set the coverage scope, in the action bar at the top of theCoverage panel, selectPer function orPer block from the drop-down list.

  2. To start the recording, clickStart instrumenting coverage and reload pageTheCoverage panel reloads the page, captures the code needed to load the page, and continues the recording while you interact with the page.

  3. To stop recording code coverage, clickStop instrumenting coverage and show results.

Analyze code coverage

The table in theCoverage panel shows you what resources were analyzed, and how much code is used within each resource.

Click a row to open that resource in theSources panel and see a line-by-line breakdown of used code and unused code. Any unused lines of code are marked with red lines next to column with line numbers on the left.

A code coverage report.

  • TheURL column is the URL of the resource that was analyzed.
  • TheType column says whether the resource contains CSS, JavaScript,or both.
  • TheTotal Bytes column is the total size of the resource in bytes.
  • TheUnused Bytes column is the number of bytes that weren't used.
  • The last, unnamed column is a visualization of theTotal Bytes andUnused Bytes columns. The red section of the bar is unused bytes. Thegray section is used bytes.

To filter the report by URL, specify it in the filter in the action bar.

The status bar at the bottom of theCoverage panel shows you the percentage of code used. The status bar takes filtering into account.

Next to the filter bar, from the drop-down list, you can selectAll, or onlyCSS orJavaScript to show in your report.

To include extension code into your report, turn onContent scripts.

To export your report, clickExport coverage.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-09-27 UTC.