Як шукати помилки в коді? Чи використовуєте дебагер?

Повне пояснення

Що це і навіщо Дебагер (debugger) — інструмент, що дозволяє розбивати виконання програми на контрольовані точки (breakpoints) і аналізувати стан у будь‑який момент. Це ключовий механізм для виявлення логічних помилок, неочікуваних значень і некоректного потоку.

Ключові принципи

• Breakpoints – зупинка виконання на конкретному рядку.
• Watch‑поля – відстеження змін значень виразів.
• Call stack – історія викликів, що допомагає зрозуміти контекст.
• Console – простий спосіб виводу інформації, але менш контрольований.

Як це працює

1. Відкривається DevTools (Ctrl+Shift+I або F12).
2. Перехід до вкладки Sources → вибір файлу.
3. Клік по лінії коду створює breakpoint.
4. При досягненні точки виконання скрипт зупиняється, і можна перевірити значення.

Практика та реалізація (JavaScript/TypeScript)

function calculate(a: number, b: number) {
  const result = a + b;
  debugger; // зупинка на цьому рядку
  return result;
}

console.log('Start calculation');
const sum = calculate(5, 7);
console.log('Result:', sum);

Тестування Для unit‑тестів можна використовувати Jest з --runInBand і debugger у тестах, а для e2e – Playwright з page.pause().

Оптимізація та edge cases

• Перевірка undefined/null перед використанням.
• Уникайте занадто глибоких рекурсій, що призводять до stack overflow.
• Пам’ятайте про asynchronous код: використовуйте await у breakpoints.

Часті помилки

1. Забувають видалити debugger перед продакшн‑деплоєм.
2. Неправильне розташування breakpoint у мініфікованому коді.
3. Не враховують closure при спостереженні змінних.

Дизайн‑рішення

• Для великих проектів створюйте debug config у VS Code, що автоматично відкриває потрібний файл.
• Використовуйте source maps для TypeScript, щоб бачити оригінальний код.

Питання після відповіді

• Як налаштувати breakpoint лише при певному значенні змінної?
• Які інструменти підтримують remote‑debugging для Node.js?