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

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

Сучасні браузери (особливо Chrome, Firefox, Edge) надають наймогутніші інструменти для налагодження JavaScript, верстки, мережевих запитів і продуктивності. Розберемо всі основні способи налагодження в браузері, від найпростіших до просунутих.

1. `console` - найпростіший і найпопулярніший спосіб

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

Основні методи:

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

Швидко, зручно, але підходить лише для простих випадків.

2. `debugger` - точка зупинки прямо в коді

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

javascript

function calculate(a, b) {
  debugger; // <-- виконання зупиниться тут
  return a + b;
}
calculate(2, 3);

Після зупинки можна:

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

3. Точки зупинки (breakpoints) у DevTools

Один із найзручніших способів налагодження. Можна зупинити виконання програми у потрібному місці без зміни коду.

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

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

Тепер можна:

дивитися локальні змінні,
відстежувати виклики функцій (Call Stack),
крокувати по коду (Step over, Step into, Step out).

4. Breakpoints за подіями (Event Listener Breakpoints)

Можна зупинити виконання, коли спрацює подія, наприклад click, keydown, resize, fetch і т.д.

Вкладка: DevTools -> Sources -> Event Listener Breakpoints

Приклади:

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

Дуже корисно при налагодженні подій і UI-логіки.

5. Налагодження DOM і CSS

Вкладка Elements:

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

Можна прямо в браузері змінювати стилі, щоб тестувати дизайн.

6. Налагодження мережевих запитів (вкладка Network)

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

URL, метод (GET, POST тощо)
Заголовки (Headers)
Відповідь (Response)
Код стану (Status)
Час завантаження

Можна дивитися fetch, XHR, API-запити, GraphQL і т.д.

Дуже корисно при налагодженні бекенд-взаємодій і API.

7. Налагодження помилок у консолі (Console)

Вкладка Console показує:

повідомлення з console.log(), console.error(),
стек викликів помилки - з файлами й рядками,
можливість виконати JS-код прямо в консолі.

Можна клацнути по посиланню на помилку -> браузер відкриє її місце в коді.

8. Watch Expressions (спостереження за змінними)

Під час зупинки (breakpoint) можна додати змінні у "Watch", щоб спостерігати, як їхні значення змінюються при покроковому виконанні.

Панель Watch доступна в DevTools -> Sources -> праворуч.

9. Налагодження async / await / промісів

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

Можна:

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

10. Live Edit - зміна коду "на льоту"

У DevTools -> Sources можна прямо змінювати JS-файл, натиснути Ctrl+S, і браузер виконає змінену версію без перезавантаження сторінки.

Чудово підходить для "експериментів" під час налагодження.

11. Налагодження продуктивності (вкладка Performance)

Дозволяє:

записувати профілі виконання коду,
вимірювати fps, затримки, вузькі місця,
бачити час відмальовування і виклики функцій.

Ідеально для оптимізації складних UI або анімацій.

12. Вкладка Memory

Використовується для пошуку витоків пам'яті й аналізу обсягів використання RAM.

Показує:

які об'єкти не очищає збирач сміття,
де відбуваються "затримки" в пам'яті.

13. Network -> WS / Fetch / GraphQL

Допомагає налагоджувати вебсокети, GraphQL і REST-запити, бачити тіло відправлюваних даних, токени, заголовки й відповіді.

14. Мобільне налагодження

Chrome DevTools підтримує remote debugging:

можна підключити телефон через 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 + телефон	Налагодження мобільних сайтів

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

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

Premium

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