🔍 What is Debugging and Why is It Important?

Debugging is a critical skill for any web developer. When you’re working with JavaScript, HTML, and CSS, bugs can creep into your code. These bugs can break functionality or cause unwanted behaviors in your web application. Fortunately, Chrome DevTools provides a powerful set of tools to help you identify and fix these issues effectively.

In this post, we’ll dive into how to use DevTools to debug JavaScript code and walk you through practical examples of setting breakpoints, stepping through your code, and fixing bugs. Let’s get started!

🔧 Opening the JavaScript Debugger in DevTools

Before we begin debugging, let’s get familiar with opening DevTools in Chrome:

  1. Open your webpage in Google Chrome.
  2. Right-click on the page and select Inspect or press Ctrl+Shift+I (Windows) or Cmd+Opt+I (Mac) to open DevTools.
  3. In DevTools, select the Console tab to view any JavaScript errors or logs.

This is where you’ll see errors like Uncaught ReferenceError or TypeError. These clues can guide you toward finding the bug in your code.

🐞 Practical Example: Debugging a Simple Fruit Counter

Let’s walk through a simple example of debugging a fruit counter that keeps track of lemons and oranges. The code should update the count and display the fruit’s stock correctly. If there are no fruits left, a Restock button should appear.

Example HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="fruit-container">
<button id="orange" class="fruit" onclick="takeAnOrange()">10 Oranges Left</button>
<button id="restock-orange" onclick="restockOranges()" class="hidden">Restock Oranges</button>
</div>
<div class="fruit-container">
<button id="lemon" class="fruit" onclick="takeALemon()">10 Lemons Left</button>
<button id="restock-lemon" onclick="restockLemons()" class="hidden">Restock Lemons</button>
</div>
<script src="script.js"></script>
</body>
</html>

Expected Behavior:

  • Both orange and lemon buttons show “10 Left.”
  • When you click on a fruit, the number decreases.
  • When the count reaches 0, the button should say “Out of Stock” and show a Restock button.

But when testing, the following issues happen:

  1. The Restock button is visible even when the fruit count is greater than 0.
  2. The text on the orange button does not update when restocked.
  3. Lemons don’t count down when clicked.

🔧 Step 1: Opening the JavaScript Debugger

  1. Open DevTools in Chrome and go to the Sources tab.
  2. Find the script.js file where the JavaScript functions are defined.

🔎 Step 2: Using Breakpoints to Find Bugs

🍊 Bug 1: Restock Button Visibility

The Restock button should only appear when the fruit count is 0. Let’s set a breakpoint and debug why this isn’t working:

  1. Set a breakpoint in the script.js file where the Restock button visibility is checked (e.g., on line 87).
  2. Step through the code by clicking the step button and inspect the code flow.
  3. You’ll notice the condition to hide the button when the fruit count is greater than 0 is incorrect.

Solution:

Fix the condition to ensure the Restock button only appears when the count reaches 0:

if (count > 0) {
button.classList.add('hidden'); // Hide button when count > 0
} else {
button.classList.remove('hidden'); // Show button when count is 0
}

🍊 Bug 2: Orange Text Not Updating

The orange button text doesn’t update after restocking. To fix this:

  1. Set a breakpoint inside the restockOranges() function (e.g., line 43).
  2. Step through and check if the updateOrangeButtonText() function is called.
  3. You’ll find that updateOrangeButtonText() is not being called before hiding the Restock button.

Solution:

Call updateOrangeButtonText() inside the restockOranges() function:

function restockOranges() {
orangeCount = 10;
updateOrangeButtonText();
toggleRestockButtonVisibility('restock-orange', orangeCount);
}

🍋 Bug 3: Lemons Not Counting Down

The lemon button doesn’t decrease when clicked. Here’s how to debug:

  1. Set a breakpoint inside the takeALemon() function (e.g., line 53).
  2. Check the getElementById() method. If it returns null, it means there’s an issue with the ID name.

Solution:

Fix the typo in the updateLemonButtonText() function:

function updateLemonButtonText() {
let button = document.getElementById('lemon'); // Fix typo here
if (lemonCount > 0) {
button.innerText = `${lemonCount} Lemons Left`;
} else {
button.innerText = 'Out of Stock';
}
}

🎯 Debugging Challenge: Fix the Fruit Counter

Now it’s time to practice what you’ve learned! Here’s a challenge based on the example code. Use DevTools to:

  1. Set breakpoints to inspect code execution.
  2. Step through your code to identify where things are going wrong.
  3. Apply the fixes to ensure that the Restock button works, text updates correctly, and lemons count down properly.

 

🎥 Watch the Video: Debugging JavaScript in Chrome DevTools

Learn how to stop using console.log for debugging and start using the powerful Chrome DevTools debugger to troubleshoot JavaScript more effectively. Watch the video below for a comprehensive guide on setting breakpoints, stepping through your code, and inspecting variables to make debugging easier and faster.

🎓 Conclusion: Debugging Made Easy with DevTools

As you’ve seen, Chrome DevTools is an indispensable tool for any web developer. By setting breakpoints, stepping through the code, and inspecting variables, you can quickly find and fix bugs in your JavaScript code. Debugging may seem frustrating at times, but each fixed bug brings you closer to mastering development!