Debugging JavaScript: Tools and Techniques

Welcome back to our series, "JavaScript: From Novice to Expert!"
Our last article introduced the fundamentals of JavaScript Syntax and Structure and today, we are going to learn about an essential skill every developer must learn to be a successful dev —debugging.

Debugging can be a bit scary at first, but with the right tools and techniques, it becomes a powerful part of your development process, helping you find bugs in your way.

Let's dive into how we can identify and fix errors to make sure our JavaScript code runs the way we want it too.

1. Understanding Common JavaScript Errors

As we code, we are bound to run into errors, and sometimes they can even be your friends!. Here are the most common types:

• Syntax Errors: These occur when there's a mistake in the use of the language itself, like a typo or missing bracket. Ex. You comst instead of const.
• Runtime Errors: These happen during execution, such as trying to call a function that doesn’t exist.
• Logical Errors: Perhaps the trickiest, these are errors where the code does not act as expected or intended, but the syntax is okay, and the code is running.

2. Browser Developer Tools

In JavaScript a big part of debugging involves using your browser’s developer tools . Here’s how:

• Console: The console is super helpful for testing quick expressions or checking the values of variables at various stages of execution.
• Debugger: Use the debugger to set breakpoints, which allow you to pause execution and inspect the state of your application at various points.
• Network Tab: This tool helps you monitor and debug issues related to network operations, essential for understanding AJAX requests and API interactions.

3. Debugging Techniques

Now let us explore some techniques that can simplify the debugging process:

• Console.log(): Simple yet effective, logging allows you to output variable values to the console, providing insight into the state of your application. When I started coding I had a console.log() every other line 🤣
• Using breakpoints: Set breakpoints in the source code view of your developer tools; this lets you pause execution and examine the values of variables step-by-step, until you find where the bug is.
• Step-by-step Execution: Learn to step through your code one line at a time using the step over, step into, and step out functionalities of the debugger.

4. Handling Exceptions

Properly handling exceptions can prevent your JavaScript applications from crashing:

• Try...Catch: Use try...catch blocks to manage errors gracefully, allowing you to handle exceptions and continue execution.

function checkUsername(username) {
    try {
        if (username.length < 10) {
            throw new Error("Username must be at least 4 characters long.");
        }
        console.log("Username is valid.");
    } catch (error) {
        console.error("Error:", error.message);
    }
}

checkUsername("happycat");  // This will throw and catch an error: "Username must be at least 4 characters long."
checkUsername("happykittycat"); // This will print: "Username is valid."

🐈‍⬛

• Throwing Errors: Sometimes you may need to throw custom errors when something goes wrong, helping maintain control flow and providing clear error messages to users.

function calculateAge(birthYear) {
    try {
        let age = new Date().getFullYear() - birthYear;
        if (age < 0) {
            throw new Error("Birth year cannot be in the future.");
        }
        console.log("Your age is:", age);
    } catch (error) {
        console.error("Error:", error.message);
    }
}

calculateAge(2025); // This will throw and catch an error: "Birth year cannot be in the future."
calculateAge(1991); // This will print: "Your age is: 33" (as of 2024)

Another step done ✅

We have covered the essentials of debugging JavaScript, which will help you write more reliable and error-free code. Remember, debugging is not just about fixing bugs—it’s about understanding your code better and ensuring it performs well under various conditions. !

Let's build together?

We at Webcrumbs are hard at work building an innovative Open Source plugin ecosystem designed to integrate seamlessly with any JavaScript framework.

If you're excited about building a better web and the tools we are developing, show your support by giving us a star on our GitHub repository.

Thanks for reading!

Pachi 🥑