Способи налагодження в браузері

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

Налагодження в браузері - це набір вбудованих у 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:

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

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

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 зберігає їх.

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

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

Premium

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