JavaScript debugger Statement

Using the debugger Keyword

The debugger keyword is a built-in feature in JavaScript that pauses the execution of a script when it is encountered. This allows developers to inspect the values of variables, functions, and the overall flow of the program in real time. It acts like a breakpoint in a development tool.

How the debugger Keyword Works

When you include the debugger keyword in your code, it signals the browser’s developer tools to pause the execution. This is helpful when you want to analyze the state of your code at a specific point.

Syntax

debugger;

Example 1: Debugging a Simple Function

function calculateSum(a, b) {
    let sum = a + b;
    debugger; // Pauses execution here
    return sum;
}
console.log(calculateSum(5, 10));

Explanation:

1. When the debugger keyword is encountered, the browser pauses the execution.
    
2. Open the browser’s developer tools (usually by pressing F12 or right-clicking on the page and selecting "Inspect").
    
3. Navigate to the "Sources" tab to see where the execution stopped.
    
4. You can inspect the values of variables a, b, and sum.

Example 2: Debugging Inside a Loop

for (let i = 0; i < 5; i++) {
    debugger; // Pauses during each iteration
    console.log("Current value of i:", i);
}

Explanation:
This example demonstrates how the debugger keyword can help inspect the value of i during each loop iteration. You can step through the loop and see how i changes.

When to Use the debugger Keyword

• To debug complex functions where console.log() may not provide enough detail.
   
• While analyzing nested loops or callbacks.
   
• To pause code execution for dynamic debugging in browsers.

Setting Breakpoints  

Breakpoints are one of the most powerful features of a JavaScript debugger. They allow you to pause the execution of your code at a specific line so you can inspect variables, evaluate expressions, & understand the flow of your program. Setting breakpoints is simple & can be done directly in your browser’s developer tools.  

Let’s take a complete example to understand how to set & use breakpoints effectively.  

Example: Debugging a Function with Breakpoints  

Suppose you have the following JavaScript code that calculates the factorial of a number but isn’t working as expected:  

function factorial(n) {  
    let result = 1;  
    for (let i = 1; i <= n; i++) {  
        result *= i;  
    }  
    return result;  
}  
let number = 5;  
let output = factorial(number);  
console.log(`The factorial of ${number} is ${output}`);  

You can also try this code with Online Javascript Compiler

Run Code

You expect the output to be `120` (since 5! = 120), but for some reason, it’s not working. Let’s debug this step by step using breakpoints.  

Step 1: Open Developer Tools  

1. Open your browser (e.g., Chrome).  
 

2. Right-click anywhere on the page & select Inspect.  
 

3. Go to the Sources tab in the Developer Tools.  

Step 2: Set a Breakpoint  

1. Find your JavaScript file in the Sources tab.  
 

2. Click on the line number where you want to pause the code. For example, click on the line `let result = 1;` inside the `factorial` function. A blue marker will appear, indicating a breakpoint.  

Step 3: Run the Code  

1. Refresh the page to run the code.  
 

2. The code will pause at the breakpoint you set.  

Step 4: Inspect Variables & Step Through the Code  

1. In the Scope section, you can see the current values of variables like `n`, `result`, & `i`.  
 

2. Use the Step Over button (or press F10) to execute the code line by line.  
 

3. Watch how the value of `result` changes with each iteration of the loop.  

Step 5: Identify the Issue  

If you notice that the loop isn’t running the correct number of times or the `result` isn’t updating as expected, you can fix the issue. In this case, the code works fine, but if there were an error, you’d see it clearly.  

Step 6: Remove the Breakpoint & Continue  

1. Once you’ve identified & fixed the issue, remove the breakpoint by clicking the blue marker again.  
 

2. Click the Resume button (or press F8) to let the code run normally.  
 

Final Output  

After debugging, the console will display:  

The factorial of 5 is 120  

This example shows how breakpoints can help you pause & inspect your code to find & fix errors.  

Example  

Let’s take a deeper look into debugging with a more practical example. This time, we’ll debug a function that checks if a number is prime. The function has a logical error, & we’ll use the JavaScript debugger to find & fix it.  

Problem Statement  

We have a function `isPrime` that is supposed to return `true` if a number is prime & `false` otherwise. However, it’s not working correctly for some inputs.  

Let’s take the initial code:  

function isPrime(num) {  
    if (num <= 1) return false;  
    for (let i = 2; i < num; i++) {  
        if (num % i === 0) {  
            return false;  
        }  
    }  
    return true;  
}  


console.log(isPrime(7));  // Expected: true  
console.log(isPrime(10)); // Expected: false  
console.log(isPrime(1));  // Expected: false  
console.log(isPrime(2));  // Expected: true  

You can also try this code with Online Javascript Compiler

Run Code

Output

true
false
false
true

Step 1: Identify the Issue  

When we run the code, we notice that `isPrime(2)` returns `false`, but it should return `true` because 2 is a prime number. Let’s debug this step by step.  

Step 2: Open Developer Tools  

1. Open your browser’s Developer Tools (right-click > Inspect > Sources tab).  
 

2. Locate the JavaScript file containing the `isPrime` function.  

Step 3: Set a Breakpoint  

1. Set a breakpoint inside the `for` loop by clicking on the line number next to `if (num % i === 0)`.  

Step 4: Run the Code  

1. Refresh the page to execute the code.  
 

2. The code will pause at the breakpoint when `isPrime(2)` is called.  

Step 5: Inspect Variables  

1. In the Scope section, check the values of `num` & `i`.  

   - `num` is `2`.  

   - `i` starts at `2`.  

Step 6: Step Through the Code  

1. Use the Step Over button to execute the code line by line.  
 

2. Notice that the condition `if (num % i === 0)` evaluates to `true` because `2 % 2 === 0`.  
 

3. The function immediately returns `false`, which is incorrect.  

Step 7: Fix the Issue  

The problem is that the loop starts at `i = 2`, which means it checks if `num` is divisible by `2` right away. For `num = 2`, this causes the function to return `false`. To fix this, we need to adjust the loop condition.  

This is the corrected code:  

function isPrime(num) {  
    if (num <= 1) return false;  
    for (let i = 2; i <= Math.sqrt(num); i++) {  
        if (num % i === 0) {  
            return false;  
        }  
    }  
    return true;  
}  

console.log(isPrime(7));  // Expected: true  
console.log(isPrime(10)); // Expected: false  
console.log(isPrime(1));  // Expected: false  
console.log(isPrime(2));  // Expected: true  

You can also try this code with Online Javascript Compiler

Run Code

Output

true
false
false
true

Explanation of the Fix  

1. We changed the loop condition from `i < num` to `i <= Math.sqrt(num)`. This optimization reduces the number of iterations because a larger factor of `num` must be a multiple of a smaller factor that has already been checked.  
 

2. For `num = 2`, the loop doesn’t run at all because `Math.sqrt(2)` is approximately `1.414`, & `i` starts at `2`. This ensures the function correctly returns `true` for `num = 2`.  

Step 8: Test the Fixed Code  

After making the changes, run the code again. The output will now be:  

true  
false  
false  
true  

This matches the expected results, & the function works correctly for all inputs.  

Specifications  

When we work with the JavaScript Debugger, it’s important to understand its key features & specifications. These features make debugging easier & more efficient. Let’s take a look at some of the most important ones with examples.  

1. Step Over, Step Into, & Step Out 

These are controls that help you navigate through your code during debugging:  

• Step Over: Executes the current line of code & moves to the next line. If the line contains a function call, it executes the entire function without stepping into it.  
   
• Step Into: If the current line contains a function call, it steps into that function so you can debug it line by line.  
   
• Step Out: If you’re inside a function, it executes the rest of the function & returns to the caller.  
   

Example

function multiply(a, b) {  
    return a * b;  
}  
function add(a, b) {  
    return a + b;  
}  
function calculate(a, b) {  
    let sum = add(a, b);  
    let product = multiply(a, b);  
    return sum + product;  
}  
let result = calculate(2, 3);  
console.log(result); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

11  

1. Set a breakpoint at the line `let sum = add(a, b);` in the `calculate` function.  
 

2. Use Step Into to debug the `add` function.  
 

3. Use Step Over to skip debugging the `multiply` function.  
 

4. Use Step Out to return to the `calculate` function after debugging `add`.  

2. Watch Expressions  

Watch expressions allow you to monitor the value of specific variables or expressions while debugging.  

Example: 

function factorial(n) {  
    let result = 1;  
    for (let i = 1; i <= n; i++) {  
        result *= i;  
    }  
    return result;  
}  


let number = 5;  
let output = factorial(number);  
console.log(`The factorial of ${number} is ${output}`);  

You can also try this code with Online Javascript Compiler

Run Code

1. Set a breakpoint inside the `for` loop.  
 

2. Add a watch expression for `result` & `i` to monitor their values as the loop runs.  

3. Call Stack  

The call stack shows the hierarchy of function calls that led to the current point in the code. It helps you understand the flow of execution.  

Example

function greet(name) {  
    console.log(`Hello, ${name}!`);  
}  
function welcome(user) {  
    greet(user);  
}  
welcome("Alice");  

1. Set a breakpoint inside the `greet` function.  
 

2. When the code pauses, check the Call Stack in the Developer Tools. It will show:  

   - `greet` (current function)  

   - `welcome` (calling function)  

4. Conditional Breakpoints  

Conditional breakpoints pause the code only when a specific condition is met.  

Example: 

function findEvenNumbers(numbers) {  
    let evens = [];  
    for (let i = 0; i < numbers.length; i++) {  
        if (numbers[i] % 2 === 0) {  
            evens.push(numbers[i]);  
        }  
    }  
    return evens;  
}  
let numbers = [1, 2, 3, 4, 5, 6];  
let evenNumbers = findEvenNumbers(numbers);  
console.log(evenNumbers); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

[2, 4, 6]  

1. Set a conditional breakpoint inside the `for` loop with the condition `numbers[i] % 2 === 0`.  
 

2. The code will pause only when an even number is found.  

5. Console Logging 

While debugging, you can use `console.log()` to print values to the console. This is helpful for quick checks without pausing the code.  

Example: 

function sumArray(arr) {  
    let sum = 0;  
    for (let i = 0; i < arr.length; i++) {  
        sum += arr[i];  
        console.log(`Current sum: ${sum}`); // Log the current sum  
    }  
    return sum;  
}  
let numbers = [1, 2, 3, 4, 5];  
let total = sumArray(numbers);  
console.log(`Total sum: ${total}`); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

15  

1. Run the code & check the console to see the logged values.  

Use of console.log() Method

The console.log() method is another popular debugging tool in JavaScript. It prints messages or variable values to the browser console, making it easier to understand what the program is doing at specific points.

How console.log() Works

console.log() outputs data to the console, allowing you to track variables, function outputs, or the flow of the code.

Syntax

console.log(data);

Example 1: Displaying a Variable’s Value

let name = "John Doe";
console.log("The value of name is:", name);

You can also try this code with Online Javascript Compiler

Run Code

Output:

The value of name is: John Doe

Explanation:
Here, the variable name is printed to the console along with a message. This helps you check if the variable contains the expected value.

Example 2: Debugging an Array

let numbers = [10, 20, 30, 40, 50];
numbers.forEach((num, index) => {
    console.log(`Index: ${index}, Value: ${num}`);
});

You can also try this code with Online Javascript Compiler

Run Code

Output:

Index: 0, Value: 10  
Index: 1, Value: 20  
Index: 2, Value: 30  
Index: 3, Value: 40  
Index: 4, Value: 50  

Explanation:
Here, console.log() is used inside a loop to display both the index and value of each element in the array.

Example 3: Debugging Conditional Statements

let age = 18;
if (age >= 18) {
    console.log("You are eligible to vote.");
} else {
    console.log("You are not eligible to vote.");
}

You can also try this code with Online Javascript Compiler

Run Code

Output:

You are eligible to vote.

Explanation:
This example shows how console.log() can help verify which block of a conditional statement is executed.

Tips for Using console.log() Effectively

Use clear and descriptive messages to avoid confusion.

Combine it with template literals for cleaner outputs. Example:
console.log(`The current value is: ${value}`);

Remove unnecessary console.log() statements before deploying your code to production.

Key Differences Between debugger and console.log()

Browser Compatibility  

The JavaScript Debugger is a powerful tool, but its features & interface can vary slightly depending on the browser you’re using. Most modern browsers like Chrome, Firefox, Edge, & Safari come with built-in developer tools that include a JavaScript debugger. Let’s understand how the debugger works in different browsers & highlight any key differences.  

1. Google Chrome  

Chrome’s Developer Tools are widely used & offer a comprehensive set of debugging features.  

Steps to Access the Debugger in Chrome:  

1. Open Chrome & navigate to the webpage you want to debug.  
 

2. Right-click anywhere on the page & select Inspect.  
 

3. Go to the Sources tab to access the JavaScript debugger.  

Key Features:  

• Breakpoints: Set breakpoints by clicking on the line numbers in your code.  
   
• Scope: View local & global variables in the Scope section.  
   
• Call Stack: See the hierarchy of function calls in the Call Stack section.  
   
• Console: Use the Console tab to run JavaScript commands & log output.  

Example:  

function greet(name) {  
    console.log(`Hello, ${name}!`);  
}  
greet("Alice");  

1. Set a breakpoint inside the `greet` function.  

2. Refresh the page to pause execution at the breakpoint.
  

3. Use the Scope section to inspect the value of `name`.  

2. Mozilla Firefox  

Firefox’s Developer Tools are also robust & user-friendly.  

Steps to Access the Debugger in Firefox:  

1. Open Firefox & navigate to the webpage you want to debug. 
 

2. Right-click anywhere on the page & select Inspect Element.  
 

3. Go to the Debugger tab to access the JavaScript debugger.  

Key Features:  

• Breakpoints: Set breakpoints by clicking on the line numbers.  
   
• Variables: View variables in the Variables section.  
   
• Call Stack: Check the function call hierarchy in the Call Stack section.  
   
• Console: Use the Console tab for logging & running commands.  
   

Example:  

function add(a, b) {  
    return a + b;  
}  
let result = add(5, 10);  
console.log(result);

You can also try this code with Online Javascript Compiler

Run Code

Output: 

15  

1. Set a breakpoint inside the `add` function. 
 

2. Refresh the page to pause execution at the breakpoint.  
 

3. Use the Variables section to inspect the values of `a` & `b`.  

3. Microsoft Edge  

Edge’s Developer Tools are similar to Chrome’s since both browsers are based on the Chromium engine.  

Steps to Access the Debugger in Edge:  

1. Open Edge & navigate to the webpage you want to debug.  
 

2. Right-click anywhere on the page & select Inspect.  
 

3. Go to the Sources tab to access the JavaScript debugger.  

Key Features:  

• Breakpoints: Set breakpoints by clicking on the line numbers.  
   
• Scope: View variables in the Scope section.  
   
• Call Stack: Check the function call hierarchy in the Call Stack section.  
   
• Console: Use the Console tab for logging & running commands.  

Example:  

function multiply(a, b) {  
    return a * b;  
}  


let result = multiply(3, 4);  
console.log(result);

You can also try this code with Online Javascript Compiler

Run Code

Output: 

12  

1. Set a breakpoint inside the `multiply` function.  
 

2. Refresh the page to pause execution at the breakpoint.  
 

3. Use the Scope section to inspect the values of `a` & `b`.  

4. Safari  

Safari’s Developer Tools are built specifically for macOS & iOS development.  

Steps to Access the Debugger in Safari:  

1. Open Safari & go to Preferences > Advanced.  
 

2. Check the box that says Show Develop menu in menu bar.  
 

3. Navigate to the webpage you want to debug.  
 

4. Click on Develop in the menu bar & select Show Web Inspector.  
 

5. Go to the Debugger tab to access the JavaScript debugger.  

Key Features:  

• Breakpoints: Set breakpoints by clicking on the line numbers.  
   
• Variables: View variables in the Variables section.  
   
• Call Stack: Check the function call hierarchy in the Call Stack section.  
   
• Console: Use the Console tab for logging & running commands.  

Example: 

function subtract(a, b) {  
    return a - b;  
}  
let result = subtract(10, 4);  
console.log(result); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

6   

1. Set a breakpoint inside the `subtract` function.
  

2. Refresh the page to pause execution at the breakpoint.  

3. Use the Variables section to inspect the values of `a` & `b`.  

Summary of Browser Compatibility  

• All major browsers (Chrome, Firefox, Edge, Safari) provide robust debugging tools.  
   
• The interface & features are similar across browsers, with minor differences in layout & terminology.  
   
• Chrome & Edge are almost identical due to their shared Chromium base.  
   
• Safari is tailored for macOS & iOS development but offers similar functionality.  

Frequently Asked Questions

What is the difference between debugger and console.log()?

The debugger keyword pauses code execution, allowing you to inspect variables and step through the code interactively. In contrast, console.log() logs messages to the console without pausing execution.

Can I use debugger in production code?

No, the debugger keyword should not be used in production code as it can interrupt execution and impact performance. It’s best suited for development.

Are there alternatives to console.log()?

Yes, other methods like console.warn(), console.error(), and console.table() provide specialized logging options.

Conclusion

In this article, we discussed two powerful debugging tools in JavaScript: the debugger keyword and the console.log() method. These tools help identify and resolve issues, making the debugging process easier for developers. While the debugger keyword pauses execution for in-depth analysis, console.log() provides quick insights into variable values and program flow.

You can also check out our other blogs on Code360.