Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Оператор debugger». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`debugger` це оператор, який ставить точку зупинки просто в коді.** Коли інтерпретатор JavaScript доходить до цього рядка, виконання призупиняється, і розробник отримує доступ до значень змінних, покрокового виконання, стека викликів і всього контексту виконання.

## Теорія

### TL;DR
- `debugger;` зупиняє виконання на своєму рядку, це вбудований у мову аналог breakpoint.
- Синтаксис мінімальний: одне слово, без аргументів і без дужок.
- Спрацьовує лише тоді, коли відкриті DevTools або підключений відлагоджувач, інакше рядок ігнорується.
- Під час паузи доступні Scope, Call Stack, консоль у контексті паузи та кроки `Step over`, `Step into`, `Step out`.
- Його зручно ставити під `if`, щоб зупинятися тільки на «проблемних» даних.
- У продакшн-код `debugger` потрапляти не повинен: прибирайте лінтером або налаштуванням збирача.

### Швидкий приклад
```javascript
function sum(a, b) {
  debugger; // execution will stop on this line
  return a + b;
}

sum(2, 3);
```

Що відбудеться:

1. Якщо DevTools **закриті**, код просто виконається, ніби `debugger` немає.
2. Якщо DevTools **відкриті**, виконання **зупиниться** на рядку з `debugger`. Ви побачите стан програми, локальні змінні та стек викликів.

### Синтаксис

```javascript
debugger;
```

Немає ні аргументів, ні дужок, просто одне слово. Це повноцінний оператор мови, а не функція, тому його не можна викликати як `debugger()` чи передати кудись як значення.

### Умовні зупинки та цикли

Найкорисніший патерн це поставити `debugger` під умову, щоб зупинятися лише в потрібному випадку. Код продовжує працювати нормально й гальмує тільки тоді, коли дані справді цікаві.

```javascript
function checkUser(user) {
  if (!user.isActive) {
    debugger; // debug only the problematic users
  }

return user.name;
}
```

Той самий підхід рятує в циклах, де зупинка на кожній ітерації була б нестерпною:

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

Вивід у консолі (за відкритих DevTools):

```javascript
0
1
2
```

а потім виконання зупиниться на `i = 3`, і можна переглянути змінні, стек і контекст.

### Налагодження async/await і обробка помилок

Оператор працює й усередині асинхронних функцій. Це зручний спосіб подивитися, що саме повернув сервер, ще до розбору тіла відповіді:

```javascript
async function fetchData() {
  const response = await fetch('https://api.example.com/users');
  debugger; // inspect the response before parsing JSON
  const data = await response.json();
  return data;
}

fetchData();
```

Так само `debugger` ставлять у блок `catch`, щоб одразу проаналізувати помилку, а не здогадуватися по тексту в консолі:

```javascript
try {
  const user = JSON.parse('{"name":"Tom"}');
  console.log(user);
} catch (err) {
  debugger; // inspect err right where it happened
  console.error('Parse failed:', err);
}
```

Якщо JSON виявиться некоректним, відлагоджувач відкриється і покаже вміст `err`, рядок помилки та стек викликів.

### Що доступно під час паузи

Коли виконання доходить до `debugger`:

- програма стає на паузу,
- у Chrome DevTools або у VS Code відкривається панель відлагоджувача,
- і далі можна:
    - дивитися **Scope Variables**: локальні, глобальні та змінні із замикань,
    - бачити **Call Stack**, тобто ланцюжок викликів, який привів у цю точку,
    - виконувати довільний код у **Console**, причому в контексті зупиненої функції,
    - переходити крок за кроком: `Step over`, `Step into`, `Step out`,
    - змінювати значення змінних прямо під час паузи і продовжувати виконання з новими даними.

### Різниця між debugger і console.log()

| Особливість | `console.log()` | `debugger` |
| --- | --- | --- |
| Показує значення | Так | Так, в інтерфейсі відлагоджувача |
| Зупиняє виконання | Ні | Так |
| Показує стек викликів | Частково, через `console.trace()` | Повністю |
| Працює без DevTools | Так | Ні |
| Дозволяє змінювати стан змінних | Ні | Так, прямо під час налагодження |

Підсумок:

| Питання | Відповідь |
| --- | --- |
| Що робить | Зупиняє виконання коду на своєму рядку |
| Коли спрацьовує | Лише за відкритих DevTools або активного відлагоджувача |
| Що можна робити під час паузи | Дивитися змінні та стек викликів, виконувати код покроково |
| Коли використовувати | При складних логічних помилках, коли `console.log` уже не допомагає |
| Чого не робить | Нічого не виводить у консоль і не впливає на код без DevTools |

### Типові помилки

- **Залишити `debugger;` у продакшн-збірці.** У користувача з відкритими DevTools сторінка просто зависне. Правило `no-debugger` у лінтері та вирізання на етапі збірки закривають цю проблему.
- **Думати, що `debugger` щось логує.** Він не друкує ні рядка: якщо потрібен слід у консолі, це окремий `console.log()` або `console.trace()`.
- **Чекати зупинки із закритими DevTools.** Без відкритої панелі або підключеного відлагоджувача оператор не має жодного ефекту, і це не баг.
- **Ставити `debugger` у гарячому циклі без умови.** Зупинка на кожній ітерації робить налагодження неможливим; додайте `if`, як у прикладі вище.
- **Забувати, що пауза заморожує всю сторінку.** Таймери, анімації та мережеві відповіді чекають, тому виміряний під час паузи час виконання не має сенсу.
- **Налагоджувати мінімізований код без source maps.** `debugger` зупиниться, але ви побачите нечитабельний рядок; увімкніть карти джерел.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати807 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.