Chrome find unused code π

I'm a full-stack developer from South Africa πΏπ¦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa πΏπ¦. I love writing about JavaScript, HTML and CSS.
No comments yet. Be the first to comment.
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

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!
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.

This will open up a coverage window.
To run a coverage, we can simply press the reload button in the coverage window.
By doing this, Chrome will re-index the page and show you all the results it found like this.

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.

Here you see my inline CSS. Depending on the colour 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 really want to optimise it to the next level!
It also works for JavaScript, but keep in mind this JavaScript just might not have been fired yet.

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.

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