Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Способи налагодження в браузері». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Сучасні браузери (особливо **Chrome**, **Firefox**, **Edge**) надають потужні інструменти для налагодження JavaScript, верстки, мережевих запитів і продуктивності. **Ключове:** від простого `console.log()` і ключового слова `debugger` до точок зупинки (breakpoints), вкладок Elements, Network, Performance та Memory у DevTools.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняСучасні браузери (особливо **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: 1. Відкрий DevTools -> вкладка **Sources**. 2. Знайди потрібний файл JS. 3. Клацни зліва від номера рядка - з'явиться блакитна мітка. 4. Перезапусти виконання коду -> програма зупиниться на цьому рядку. Тепер можна: - дивитися **локальні змінні**, - відстежувати **виклики функцій (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 + телефон | Налагодження мобільних сайтів |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.