Suggest an edit

Improve this article

Refine the answer for “What does the debugger statement do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. If DevTools is **closed** → the code just runs as if `debugger` weren't there.
2. 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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts622 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.