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

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

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

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

Контент

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

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

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

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

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

**Налагодження в браузері** - це набір вбудованих у DevTools інструментів, які дозволяють дивитися значення змінних, зупиняти виконання коду, інспектувати DOM і CSS, аналізувати мережеві запити, продуктивність та пам'ять. Chrome, Firefox і Edge дають приблизно однаковий набір можливостей: від найпростішого `console.log()` до профілювання й віддаленого налагодження телефона з комп'ютера.

## Теорія

### TL;DR
- `console.*` це найшвидший спосіб подивитися значення: `log`, `error`, `warn`, `table`, `time`, `group`.
- `debugger;` у коді зупиняє виконання на цьому рядку, якщо DevTools відкритий.
- Breakpoints у вкладці Sources роблять те саме без зміни коду, плюс дають покрокове виконання, Call Stack, Scope і Watch.
- Event Listener Breakpoints зупиняють код у момент події: `click`, `keydown`, `setTimeout`, зміна DOM.
- Elements налагоджує розмітку і стилі, Network показує запити (`fetch`, XHR, WebSocket, GraphQL).
- Performance і Memory шукають вузькі місця та витоки пам'яті, а remote debugging дає доступ до мобільного браузера з ПК.

### Швидкий приклад
```javascript
function calculate(a, b) {
  debugger; // execution pauses here when DevTools is open
  return a + b;
}

console.group('calculate');
console.time('calc');
console.table([{ a: 2, b: 3 }]);
console.log('result =', calculate(2, 3));
console.timeEnd('calc');
console.groupEnd();
```

### Консоль і ключове слово debugger

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

| Метод | Призначення | Приклад |
| --- | --- | --- |
| `console.log()` | Виводить текст і значення | `console.log("x =", x)` |
| `console.error()` | Показує помилку червоним кольором | `console.error("Request failed")` |
| `console.warn()` | Попередження, жовтим кольором | `console.warn("Deprecated API")` |
| `console.table()` | Табличний вивід масивів та об'єктів | `console.table(users)` |
| `console.time()` / `console.timeEnd()` | Вимірює час виконання ділянки коду | `console.time("load")` |
| `console.group()` / `console.groupEnd()` | Групує логи у згортаний блок | `console.group("init")` |

Це швидко й зручно, але підходить лише для простих випадків: логами ви бачите зріз значення, а не весь контекст виконання.

Наступний крок це ключове слово `debugger;`. Додайте його в код, і браузер зупинить виконання саме на цьому рядку, якщо DevTools відкритий.

```javascript
function calculate(a, b) {
  debugger; // <-- execution will stop here
  return a + b;
}

calculate(2, 3);
```

Після зупинки можна дивитися значення змінних, переходити по рядках, бачити стек викликів і контекст виконання. Якщо DevTools закритий, рядок просто ігнорується.

### Точки зупинки та покрокове виконання

Breakpoints це один із найзручніших способів: ви зупиняєте програму в потрібному місці *без зміни коду*.

Як поставити breakpoint:

1. Відкрийте DevTools, вкладка **Sources**.
2. Знайдіть потрібний файл JS у дереві зліва.
3. Клацніть ліворуч від номера рядка, з'явиться позначка.
4. Перезапустіть виконання, програма зупиниться на цьому рядку.

Далі доступні:

- **Scope**: локальні змінні, замикання і глобальні значення на момент зупинки.
- **Call Stack**: ланцюжок викликів функцій, який привів у цю точку.
- Покрокове виконання: `Step over` (перейти через виклик), `Step into` (зайти всередину функції), `Step out` (вийти з поточної функції), `Resume` (продовжити до наступної зупинки).
- **Watch Expressions**: панель праворуч, куди додають вирази і змінні, щоб спостерігати, як їхні значення змінюються під час покрокового виконання.

Є також умовні точки зупинки: клацання правою кнопкою по номеру рядка дозволяє задати умову, і код зупиниться лише тоді, коли вона істинна. Це рятує в циклах на тисячі ітерацій.

### Точки зупинки за подіями та асинхронний код

Розділ **DevTools -> Sources -> Event Listener Breakpoints** дозволяє зупинити виконання в момент, коли спрацює подія, навіть якщо ви не знаєте, який саме обробник її обслуговує.

Приклади:

- Зупинитися, коли на сторінці станеться `click`.
- Коли браузер виконає `setTimeout()`.
- Коли зміниться DOM (`DOM Mutation`), наприклад вузол видалили або додали атрибут.

Це дуже корисно під час налагодження подій та UI-логіки.

Сучасні браузери підтримують **асинхронний стек викликів**: якщо помилка сталася в `await` або всередині промісу, стек покаже шлях через асинхронні функції, а не обірветься на внутрішньому коді рушія. Тому можна:

- ставити breakpoints усередині `async` функцій,
- бачити повні `await`-ланцюжки,
- відстежувати стани `Promise` у панелі Sources.

### DOM, CSS і мережеві запити

**Elements** відповідає за розмітку і стилі:

- перегляд та зміна HTML у реальному часі,
- перевірка й редагування CSS,
- відстеження того, яке саме правило перемогло і звідки воно прийшло,
- вкладка `Computed` з підсумковими обчисленими стилями.

Стилі можна міняти прямо в браузері, щоб перевірити дизайн без перезбирання проєкту.

**Network** показує всі запити, які зробила сторінка, і їхні параметри:

- URL і метод (`GET`, `POST` і так далі),
- заголовки (`Headers`), включно з токенами авторизації,
- тіло відповіді (`Response`) і тіло запиту (`Payload`),
- код стану (`Status`),
- час завантаження і водоспад таймінгів.

Тут же налагоджують `fetch`, XHR, REST, GraphQL і WebSocket: для сокетів є окремий фільтр **WS** із переліком усіх кадрів, що пішли в обидва боки. Це основний інструмент, коли треба зрозуміти, хто винен: фронтенд чи бекенд.

**Console** крім логів показує стек викликів помилки з файлами та рядками, а посилання праворуч від повідомлення відкриває точне місце в коді. Плюс у консолі можна виконувати довільний JS у контексті сторінки, звертатися до змінних, викликати функції й перевіряти гіпотези.

### Продуктивність, пам'ять, Live Edit і мобільні пристрої

**Performance** записує профіль виконання: скільки часу пішло на скрипти, стилі, layout і відмальовування, де просіли fps, які функції тримають головний потік. Ідеально для оптимізації складного UI та анімацій.

**Memory** шукає витоки пам'яті: знімки купи (heap snapshots) показують, які об'єкти не прибирає збирач сміття і що саме тримає на них посилання.

**Live Edit**: у Sources можна редагувати JS-файл прямо в браузері та зберегти його через `Ctrl+S`, і браузер виконає змінену версію без перезавантаження сторінки. Добре підходить для швидких експериментів під час налагодження.

**Remote debugging**: Chrome DevTools уміє підключатися до телефона через USB, відкривати сторінку, що виконується на пристрої, і налагоджувати її з ПК, разом з елементами, JS і мережею.

Підсумкова таблиця:

| Спосіб | Де використовується | Що робить |
| --- | --- | --- |
| `console.log()` | У коді | Швидка перевірка значень |
| `debugger` | У коді | Зупиняє виконання на рядку |
| Breakpoints | DevTools -> Sources | Зупинка на потрібному рядку без зміни коду |
| Event Breakpoints | DevTools -> Sources | Зупинка в момент події |
| Network | DevTools | Налагодження API-запитів |
| Elements | DevTools | Зміна DOM і CSS |
| Performance | DevTools | Аналіз швидкості |
| Memory | DevTools | Пошук витоків пам'яті |
| Watch / Scope | DevTools | Спостереження за змінними |
| Console | DevTools | Логи, помилки, виконання коду |
| Remote debugging | Chrome і телефон | Налагодження мобільних сторінок |

### Типові помилки

- **Залишати `console.log()` і `debugger;` у продакшн-збірці.** Логи засмічують консоль користувача і можуть витікати даними, а `debugger;` зупиняє сторінку в усіх, хто відкрив DevTools. Прибирайте їх лінтером або налаштуванням збирача.
- **Налагоджувати мінімізований код без source maps.** Без карт джерел ви бачите одну довгу нечитабельну лінію; увімкніть source maps і перевірте, що вони віддаються разом зі збіркою.
- **Логувати об'єкт і вірити побаченому.** Консоль показує «живе» посилання, тому розгорнутий пізніше об'єкт може вже мати інші поля. Для зрізу використовуйте `console.log(structuredClone(obj))` або `console.table()`.
- **Шукати помилку логами там, де потрібен breakpoint.** Десяток `console.log()` замінюється однією умовною точкою зупинки, яка показує весь Scope і Call Stack одразу.
- **Забувати про фільтри в Network і Console.** Якщо запит «не йде», часто він просто відфільтрований, або ввімкнено `Hide network messages`.
- **Ігнорувати `Preserve log`.** Під час навігації або редиректу логи й запити очищаються, і помилка зникає разом з ними; галочка `Preserve log` зберігає їх.

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

Для рев’юера

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

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