Що робить оператор debugger?

JavaScriptJunior~2 хв читання

Коротке визначення

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

подивитися значення змінних,

пройтися по коду покроково,

побачити стек викликів і контекст виконання.

Синтаксис

javascript

debugger;

Немає ні аргументів, ні дужок - просто одне слово.

Приклад 1. Базове використання

javascript

function sum(a, b) {
  debugger; // ← виконання зупиниться тут
  return a + b;
}

sum(2, 3);

Що станеться:

Якщо DevTools закрито → код просто виконається, ніби debugger немає.
Якщо DevTools відкрито → виконання зупиниться на рядку з debugger. Ти побачиш стан програми, локальні змінні і стек викликів.

Приклад 2. Разом з умовами

javascript

function checkUser(user) {
  if (!user.isActive) {
    debugger; // налагодимо тільки "проблемних" користувачів
  }
  return user.name;
}

Так зручно ставити "розумні" точки зупинки - код продовжує працювати, але зупиняється тільки за потрібних умов.

Приклад 3. Використання всередині циклу

javascript

for (let i = 0; i < 5; i++) {
  if (i === 3) debugger; // призупиниться тільки на i=3
  console.log(i);
}

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

javascript

0
1
2

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

Приклад 4. Налагодження async/await і промісів

javascript

async function fetchData() {
  const response = await fetch("https://example.com");
  debugger; // можна подивитися вміст response перед JSON
  const data = await response.json();
  return data;
}

fetchData();

Дуже зручно перевіряти, що саме повернув сервер, не чекаючи помилок чи логів.

Приклад 5. Використання в реальному налагодженні

javascript

try {
  const user = JSON.parse('{"name":"Tom"}');
  console.log(user);
} catch (err) {
  debugger; // при помилці можна одразу проаналізувати err
  console.error("Помилка:", err);
}

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

Як виглядає "зупинка" в браузері

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

програма ставиться на паузу;
у Chrome DevTools або VS Code відкривається панель "Debugger";
ти можеш:
- дивитися Scope Variables (локальні, глобальні, замикання),
- бачити Call Stack,
- виконувати код у Console,
- переходити крок за кроком (Step over, Step into, Step out).

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

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

7. Важливі зауваження

Якщо DevTools не відкрито - debugger не впливає на виконання програми.
У продакшені код із debugger потрібно видаляти (або вимикати через прапорці збірки).
Можна використовувати в поєднанні з умовами, щоб зупинка відбувалася тільки в певних ситуаціях.

Підсумок

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.