What does the debugger statement do?

JavaScriptJunior~2 min read

A short definition

debugger is a special statement that sets a "breakpoint" in the code. When the JavaScript interpreter reaches this line, execution pauses, and the developer can:

inspect variable values,

step through the code,

see the call stack and the execution context.

Syntax

javascript

debugger;

No arguments, no parentheses - just one word.

Example 1. Basic usage

javascript

function sum(a, b) {
  debugger; // ← execution pauses here
  return a + b;
}

sum(2, 3);

What happens:

If DevTools is closed → the code just runs as if debugger weren't there.
If DevTools is open → execution pauses on the line with debugger. You see the state of the program, local variables, and the call stack.

Example 2. Combined with conditions

javascript

function checkUser(user) {
  if (!user.isActive) {
    debugger; // debug only the "problem" users
  }
  return user.name;
}

This is a convenient way to set "smart" breakpoints - the code keeps running, but pauses only under the needed conditions.

Example 3. Usage inside a loop

javascript

for (let i = 0; i < 5; i++) {
  if (i === 3) debugger; // pauses only at i=3
  console.log(i);
}

Console output (with DevTools open):

javascript

0
1
2

and then execution pauses at i = 3, and you can inspect the variables, the stack, and the context.

Example 4. Debugging async/await and promises

javascript

async function fetchData() {
  const response = await fetch("https://example.com");
  debugger; // you can look at the response contents before JSON
  const data = await response.json();
  return data;
}

fetchData();

Very handy for checking exactly what the server returned, without waiting for errors or logs.

Example 5. Usage in real debugging

javascript

try {
  const user = JSON.parse('{"name":"Tom"}');
  console.log(user);
} catch (err) {
  debugger; // on error you can immediately inspect err
  console.error("Error:", err);
}

If the JSON turns out to be invalid, the debugger opens and shows the contents of err, the error message, and the call stack.

What a "pause" looks like in the browser

When execution reaches debugger:

the program pauses;
the "Debugger" panel opens in Chrome DevTools or VS Code;
you can:
- look at Scope Variables (local, global, closures),
- see the Call Stack,
- run code in the Console,
- step through the code (Step over, Step into, Step out).

6. The difference between `debugger` and `console.log()`

Feature	`console.log()`	`debugger`
Shows values	Yes	Yes (in the debugger UI)
Stops execution	No	Yes
Shows the call stack	Partially (via `.trace()`)	Fully
Works without DevTools	Yes	No
Changes variable state	No	Possible directly while debugging

7. Important notes

If DevTools is not open - debugger does not affect program execution.
In production, code with debugger should be removed (or disabled via build flags).
It can be used together with conditions, so it only pauses in specific situations.

Summary

What it does	Description
`debugger`	Stops code execution
When it triggers	Only with DevTools open or an active debugger
What you can do during the pause	Inspect variables, the call stack, step through the code
When to use it	For complex logic errors, when `console.log` no longer helps
What it does not do	It does not print to the console or affect the code without DevTools

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.