The debugger statement

JavaScript course · Beginner · Lesson 125/133

Learn to pause code and step through it in DevTools with the debugger statement.

The debugger statement

The debugger statement pauses your code while it runs and opens the developer tools (DevTools). This point is called a breakpoint. The code waits here; you can inspect variables, evaluate expressions and step through slowly.

Use the stepping buttons on the toolbar to move line by line: go to the next line, step into a function or resume the code. When you are done, remove the debugger line.

Stepping buttons

Once paused at a breakpoint you use the toolbar buttons. Resume: runs the code until the next breakpoint. Step over: moves one line forward without entering a function call.

Step into: enters the called function. Step out: runs the rest of the current function and returns to the caller. These buttons let you trace the bug line by line.

Exercise Add a pause with debugger

Define a function called findMax(nums). Use a for loop to find the largest number in the array. Inside the loop, use the debugger statement to pause at each step. Then call findMax([3, 7, 2]).

Show example solution

function findMax(nums) {
  let max = nums[0];
  for (let i = 1; i < nums.length; i++) {
    debugger;
    if (nums[i] > max) {
      max = nums[i];
    }
  }
  return max;
}

findMax([3, 7, 2]);

Test yourself

Add the debugger statement

function check(value) {
  ____;
  return value;
}

Show answer

function check(value) {
  debugger;
  return value;
}

What does the debugger statement do?
- Marks code as a comment
- Deletes a variable
- Pauses execution
- Throws an error immediately
Show answer

Pauses execution — Correct. debugger pauses the code temporarily.
Match the button to its job

Resume

Run until the next breakpoint
Step over

Advance one line, do not enter
Step into

Enter the called function
Step out

Finish the current function

All lessons in Beginner

1 Variables and data types

2 Operators

The debugger statement