Find Unused JavaScript & CSS Code Using Chrome Dev Tool

Chrome is one of the best browsers has lots of developer tools features.

Most of the front-end developers using chrome browsers to develop, and debug the web application and websites.

This article will see how to find the unused JavaScript and CSS code in our website or web application pages using the chrome Dev tool.

Unused JavaScript and CSS file and code will affect your page performance.

Overview

Loading unused JavaScript and CSS files and codes is a common problem in web applications or website development. For example, if your using some UI library or frameworks components like the bootstrap button in your website or web application page.

To use the bootstrap button component you have to add the bootstrap link to the bootstrap CSS style sheet file into your HTML files like the below example.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Attractive Aurora</title>
  <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
  />
  </head>
  <body>
  h2
  <button type="button" class="btn btn-primary">
  Subscribe Attractive Aurora
  </button>
  </body>
</html>{codeBox}

The above-linked style sheet contains all bootstrap components CSS. But you're not using all the components on your web page.

On our page, we are only using the button component. But We loading all unwanted CSS styles and files on the page.

Unwanted or Unused CSS files will cause the below problems:

The unused extra code slows down your page loading
If your access the web page from a mobile phone, the unused code uses their mobile internet data to download the used code.

The Coverage tab in chrome Dev tools helps to find unused CSS and JavaScript code in your website or web page.

How to use Coverage Tab Step By Step

Open Chrome browser Dev tool press ctrl + shift + p and type coverage.

Select the Show Coverage command and press enter to run the converge command.

After press enter coverage tab. It will open in the drawer and clicks reload icon to start coverage. I will reload the page and show the coverage report with respective columns like URL, Type, Total Bytes, Unused Bytes.

After Click reload icon

Column 1 - URL : Show the URL of the resource.

Column 2 - Type : This column helps to find files type like JavaScript or CSS.

Column 3 - Total Bytes : This column will show the total size of the resource.

Column 4 - Unused Bytes : This column will show the total bytes and unused bytes. The Green section used bytes and Red selection Unused Bytes.

To stop the coverage click the red icon on top of the left side in the console drawer.

Note : you can click the particular file in the coverage report to view line by line used and unused code in the source code.

Red -> Red selection Unused Bytes and Codes.

Green -> Green section used Bytes and Codes