📖 JavaScript Debugging

Debugging is an essential skill for any developer. It involves identifying, isolating, and fixing bugs in your code. JavaScript provides several tools and techniques to help you debug your code effectively. This guide will walk you through a systematic approach to debugging JavaScript code.

Systematic Approach to Debugging

A methodical approach to debugging can save time and help you solve problems more efficiently. Here's a step-by-step guide:

  1. Reproduce the Bug: Identify the exact steps to consistently reproduce the issue. This helps in understanding when and how the bug occurs.
  2. Understand the Expected Behavior: Clearly define what the code is supposed to do. This helps in contrasting the actual behavior with the expected behavior.
  3. Check the Error Message: Look at any error messages in the console or log files. These messages often provide clues about what went wrong and where to look.
  4. Use Debugging Tools: Utilize debugging tools such as browser developer tools, VS Code debugger, and logging to step through the code, inspect variables, and understand the program's state at various points.
  5. Modify and Test: Make changes to the code to fix the issue. Test the changes thoroughly to ensure that the bug is resolved and no new issues are introduced.
  6. Review and Refactor: Review the changes to ensure they are optimal and follow best practices. Refactor the code if necessary to improve readability and maintainability.
  7. Document the Fix: Document the issue, the steps taken to resolve it, and any changes made to the code. This is helpful for future reference and for other team members.

Detailed Debugging Example

Let's go through a detailed example to illustrate the debugging process.

1. Reproduce the Bug

Consider the following code:


function divide(a, b) {
    return a / b;
}

let result = divide(10, 0);
console.log('Result:', result);

When running this code, you get Infinity in the console instead of a meaningful result.

2. Understand the Expected Behavior

The divide function should return the result of dividing a by b. If b is 0, it should handle the division appropriately (e.g., throw an error or return a specific value).

3. Check the Error Message

In this case, there's no error message, but the result Infinity indicates something went wrong due to the unexpected program output. Some problems with programs don't generate warnings and errors. Sometimes they just don't work as expected. In this case, we need to handle the division by zero.

You should continuously check the state of your program using the browser console since built-in errors are often caught and displayed there. This can be your first indication of errors in the code.

Example


// Using console.log() to debug a function
function add(a, b) {
    console.log('Adding:', a, b);
    return a + b;
}

let result = add(2, 3);
console.log('Result:', result);

4. Use Debugging Tools

The browser console is a powerful tool for debugging JavaScript code. It allows you to run JavaScript code, view error messages, and inspect variables and objects. Here are some common coding techniques for accessing the browser console from within your program.

  • console.log(): Prints messages or variables to the console.
  • console.error(): Prints error messages to the console.
  • console.warn(): Prints warning messages to the console.
  • console.table(): Displays data as a table in the console.

Let's add a console.log() statement to inspect the values of a and b.


function divide(a, b) {
    console.log('a:', a, 'b:', b);
    return a / b;
}

let result = divide(10, 0);
console.log('Result:', result);

By inspecting the values in the browser console at run time, we confirm that b is 0.

Using Breakpoints as Debugging Tools

We can use breakpoints to pause execution and inspect the code step by step. Breakpoints allow you to pause the execution of your code at a specific line, so you can inspect the state of your program or the value of objects and step through your code line by line. Here's how to set breakpoints:

  • Open the browser's developer tools (usually with F12 or Ctrl+Shift+I).
  • Go to the "Sources" tab in Chrome or "Debugger" tab in Firefox.
  • Find the JavaScript file you want to debug.
  • Click on the line number where you want to set a breakpoint.
Example

// Example function to debug with breakpoints
function multiply(a, b) {
    return a * b;
}

let result = multiply(4, 5);
console.log('Result:', result);

Set a breakpoint on the line return a * b; and use the developer tools to step through the code. You should be able to view the values of a and b in the browser dev tools.

Using the VS Code Debugger

Visual Studio Code (VS Code) provides an integrated debugging environment that allows you to set breakpoints, step through code, and inspect variables. Here's how to use it:

  • Open your JavaScript file in VS Code.
  • Set breakpoints by clicking on the line number.
  • Go to the "Run and Debug" view (Ctrl+Shift+D).
  • Select "Run and Debug" and choose the appropriate configuration.

5. Modify and Test

Add error handling to manage the division by zero case:


function divide(a, b) {
    console.log('a:', a, 'b:', b);
    if (b === 0) {
        console.error('Cannot divide by zero');
        return undefined;
    }
    return a / b;
}

let result = divide(10, 0);
console.log('Result:', result);

After adding the error handling, run the code again. The console should now show Cannot divide by zero instead of Infinity.

6. Review and Refactor

Ensure the error handling is clear and follows best practices. You might refactor the function to make it more robust.


function divide(a, b) {
    if (typeof a !== 'number' || typeof b !== 'number') {
        console.error('Both arguments must be numbers');
        return undefined;
    }
    console.log('a:', a, 'b:', b);
    if (b === 0) {
        console.error('Cannot divide by zero');
        return undefined;
    }
    return a / b;
}

let result = divide(10, 0);
console.log('Result:', result);

7. Document the Fix

Document the issue and the steps taken to resolve it. For example, add the following comments to the code base for other developers to see:


<!--
Issue: Division by zero results in Infinity.
Fix: Added error handling to check for division by zero and non-number arguments.
-->

Using Debugger Statements

The debugger statement can be used to pause the execution of your code at a specific point. When the browser encounters a debugger statement, it will stop executing and open the debugging tools.

Example


// Using debugger statements
function subtract(a, b) {
    debugger;
    return a - b;
}

let result = subtract(10, 5);
console.log('Result:', result);

Putting It Into Action

To see these debugging techniques in action, create an HTML file and include the following script. This script will demonstrate various debugging methods:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debugging Example>/title>
</head>
<body>
    <script>
        // Using console.log() to debug a function
        function add(a, b) {
            console.log('Adding:', a, b);
            return a + b;
        }

        let result = add(2, 3);
        console.log('Result:', result);

        // Example function to debug with breakpoints
        function multiply(a, b) {
            return a * b;
        }

        result = multiply(4, 5);
        console.log('Result:', result);

        // Using debugger statements
        function subtract(a, b) {
            debugger;
            return a - b;
        }

        result = subtract(10, 5);
        console.log('Result:', result);
    </script>
</body>
</html>

Challenge

Use the debugging techniques covered in this article to identify and fix the bugs in the following code.

In order to check your learning, you should attempt to create a solution before revealing the provided solution below.


function divide(a, b) {
    if (b == 0) {
        throw new Error('Cannot divide by zero');
    }
    return a / b;
}

let result = divide(10, 0);
console.log('Result:', result);

References

Troubleshooting Note

If you encounter errors such as InvalidStateError, it may be due to browser extensions or privacy settings interfering with the script execution. To resolve this:

  • Try disabling all browser extensions and reloading the page.
  • Open the HTML file in a private/incognito window.
  • Use a different browser (like Chrome, Firefox, or Edge) to see if the issue persists.