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

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

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

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

Контент

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

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

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

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

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

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

---

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

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

---

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

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

---

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

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

---

## 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 |

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

Для рев’юера

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

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