Оператор debugger

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

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);

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

Якщо DevTools закриті, код просто виконається, ніби debugger немає.
Якщо 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 зупиниться, але ви побачите нечитабельний рядок; увімкніть карти джерел.

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

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

Premium

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