Find unused JavaScript code with Chrome Dev Tools

This videos covers how Chrome dev tools can be used to discover unused code in your files.

Code

<!DOCTYPE html>
<html lang="en">
<head>
<title>Payment Form</title>
</head>
<body>
<div>
<button
id="pay"
style="background: #fbe555;
height: 50px;
width: 100px;
border-radius: 5px;
font-size: 20px;
font-weight: 700;"
>
Pay
</button>
</div>
</body>
<script>
function onPayClick(amount) {
console.log("Contacting your bank to pay me $", amount);
}
function afterClick() {
console.log('Payment Button Pressed!')
}
var button = document.getElementById("pay");
button.addEventListener("click", () => onPayClick(10));
</script>
</html>
</html>

Full Transcript

00:00 Hi there! My name is Deeksha Sharma from Bonsaiilabs and today in this video we will see how Chrome dev tools can be used to discover unused code in your files. But first why unused code is bad for applications and why should you even remove it? That's because removing unused code makes your page load faster because less amount of data transfer is needed. Also your mobile users will thank you because you are saving their data by reducing the amount of unnecessary JavaScript or CSS that's loaded into their browser when they run your app. Let's say we have this HTML file containing very basic code, a head and a body which has a button with ID called pay and some styling of that button. The caption for the button is Pay and then there is a script tag containing two functions, onPayClick() which should be called when someone clicks on the pay button we have just seen. There is another function called afterClick() which when called should display the message on the console Payment Button Pressed. Now calling, getElementById() with value of id as Pay returns the button element to us and we call the addEventListener() which set up a function to be called when the click event is triggered. That's all. It's a pretty simple use case. Let's go over to your Chrome and click on the file menu to open this HTML file.

01:20 You can use command+option+i if you're using a Mac to open the dev tools. You want to click on these three dots indicating more and select coverage. Click on this reload button and it'll start capturing the coverage of the code in this HTML file. Here URL indicates the URL of this file on my machine, type column indicates whether the code is for JavaScript, CSS or it may be for both, total Bytes column give us the total number of bytes in this code, Unused Bytes column is the number of Bytes that are unused and the last column is the visual representation of total Bytes vs unused Bytes. The red color indicates the unused Bytes. Now all good! but how do you see which code exactly in this file is unused? Just click on the URL here and the code will appear in the pane on the top of dev tools.

02:16 If you scroll further down, it has color coded the lines of code that were not used. Well! it marked both of the functions unused. The first function is marked as unused because we simply opened this HTML file and never clicked on the pay button. If we click on this button now you will see that the red color disappear and it becomes blue, but we still see this red color for the second function indicating that it is never used and that is correct. The only thing we can do on this page is clicking on the pay button, which doesn't really utilize this extra function. So this piece of code can be safely removed. Let's stop the code coverage and go back to the code. We remove this extra function and save it. Now we come back to the Chrome and refresh the page.

03:12 All good! let's run the coverage again and it shows unused Bytes, which we know it's because we haven't clicked on the button yet. We click on the pay button and there you go. So this is a quick way to test your unused JavaScript and CSS code using Chrome dev tools. I hope that was useful for you. I hope it was quick and useful for you. Thanks for watching this video. If you would like to take your JavaScript knowledge to the next level and want to know and understand how browsers execute JavaScript and the role of event loop, check out our new course, which is live. I've added the link in the description below. Friends, keep learning and share your knowledge. I'll see you in the next video.