Що таке налагодження?

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

Налагодження (debugging) - це процес пошуку, аналізу та усунення помилок (багів) у програмі. Коли твій код не працює так, як ти очікуєш, саме налагодження допомагає зрозуміти, чому це відбувається і як це виправити.

1. Простими словами

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

2. Основні цілі налагодження

Зрозуміти, чому код поводиться неправильно.
Знайти місце, де відбувається помилка.
Виправити баг (помилку логіки, синтаксису, даних тощо).
Перевірити, що після виправлення все працює коректно.

3. Як відбувається налагодження (по кроках)

Виявлення помилки - програма падає або поводиться не так, як очікувалося.
Аналіз - читаєш повідомлення про помилку, вивчаєш стек викликів (stack trace).
Постановка "точок зупину" (breakpoints) - щоб побачити, що відбувається "всередині" програми.
Покрокове виконання - йдеш по коду рядок за рядком, перевіряєш значення змінних.
Виправлення - знаходиш джерело помилки і вносиш зміни.
Перевірка - запускаєш знову, щоб переконатися, що помилку справді усунено.

4. Засоби для налагодження в JavaScript

Консоль

Найпростіший і найпопулярніший інструмент:

javascript

console.log("Змінна x:", x);
console.error("Помилка:", err);
console.table(users);

Використовується, щоб вивести проміжні значення і зрозуміти, де все пішло не так.

Налагоджувач (debugger)

Спеціальна інструкція, яка зупиняє виконання коду і відкриває DevTools.

javascript

function test(a, b) {
  debugger; // зупинка тут
  return a + b;
}
test(2, 3);

У браузері при цьому відкриваються інструменти розробника, і ти можеш:

дивитися значення змінних,
покроково переходити по рядках,
бачити стек викликів,
контролювати виконання коду.

Breakpoints (точки зупину)

У Chrome DevTools, VS Code та інших IDE можна клікнути ліворуч від номера рядка, і програма автоматично зупиниться на цьому місці при запуску.

Network / Sources / Call Stack

У налагоджувачі можна:

стежити за мережевими запитами,
дивитися вихідний код і змінні,
аналізувати стек викликів, щоб зрозуміти, яка функція викликала помилку.

5. Налагодження асинхронного коду

У JavaScript особливо важливо вміти налагоджувати:

async/await
Promise
таймери (setTimeout)
події (click, keydown тощо)

Для цього налагоджувачі підтримують асинхронний стек викликів, щоб можна було бачити весь шлях до помилки, навіть якщо вона сталася через секунду після події.

6. Налагодження на практиці (приклад)

javascript

function divide(a, b) {
  if (b === 0) throw new Error("Ділення на нуль!");
  return a / b;
}

function calculate() {
  const x = 10;
  const y = 0;
  const result = divide(x, y);
  console.log("Результат:", result);
}

calculate();

Помилка:

javascript

Uncaught Error: Ділення на нуль!
    at divide (<anonymous>:2:21)
    at calculate (<anonymous>:8:18)

Стек викликів показує, у якому рядку і якою функцією було викликано помилку. Це і є частина налагодження.

7. Налагодження в Node.js

Node.js теж підтримує налагодження. Можна запустити програму з ключем:

javascript

node --inspect index.js

А потім відкрити Chrome → chrome://inspect, щоб бачити точки зупину і стек прямо в браузері.

8. Інструменти для налагодження

Інструмент	Де використовується
Chrome DevTools	Налагодження фронтенду, мережевих запитів, DOM
VS Code Debugger	Покрокове налагодження Node.js і браузерного JS
Sentry / GlitchTip	Відстеження помилок у продакшені
console.log / debugger	Швидка ручна перевірка

Підсумок

Поняття	Опис
Налагодження (debugging)	Процес пошуку і виправлення помилок
debugger	Ключове слово, що ставить "паузу" в коді
breakpoint	Точка, де виконання коду зупиняється
stack trace	Шлях викликів функцій до помилки
console.log()	Швидкий спосіб побачити дані
DevTools / VS Code Debugger	Основні інструменти для налагодження JS

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

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

Premium

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