Subscribe

Chrome find unused code ๐Ÿ”Ž

โœ๏ธ

Another great element in Chrome dev tools is the code coverage tool!

22 Oct, 2020 ยท 2 min read

Nowadays, we have PurgeCSS, which is cool at identifying what CSS is being used and not. But did you know Chrome also has the option to show you what CSS and JavaScript are actually being used and what not?

Yes, Chrome has a Code Coverage tool!

Finding the Chrome coverage tool

We can access this tool by opening up the development tools.

Mac Cmd + Shift + C or Windows: Ctrl + Shift + C.

Next click the three dots -> More tools -> Coverage.

Chrome coverage window

This will open up a coverage window.

Running a coverage

We can simply press the reload button in the coverage window to run a coverage.

By doing this, Chrome will re-index the page and show you all the results it found like this.

Chrome coverage report

This is the high-level overview of the scripts and css loaded on the page. But how can we now see what's being used or not?

Click on one of the results to see it in detail.

Chrome coverage CSS result

Here you see my inline CSS. Depending on the color you can see if a line is being used or not.

In the above example, the red lines are not being used.

Do be aware when removing the CSS. It might be used on another page!

So this is really cool. It will give you at least a starting ground if you want to optimize it to the next level!

It also works for JavaScript, but this JavaScript might not have been fired yet.

Code coverage JavaScript

Exporting this data

There is also the option to export these results from the coverage. You could use another tool to then automated remove these lines from your code.

You can find the export in the coverage window.

Chrome coverage export

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Chrome DevTools: Recorder

21 Jan, 2022 ยท 3 min read

Chrome DevTools: Recorder

Chrome DevTools: CSS Overview

30 Nov, 2021 ยท 3 min read

Chrome DevTools: CSS Overview

Join 1372 devs and subscribe to my newsletter