Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить оператор debugger?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`debugger`** - спеціальний оператор, який ставить "точку зупинки" в коді. Коли інтерпретатор JavaScript доходить до цього рядка, виконання призупиняється, і розробник може подивитися значення змінних, пройтися по коду покроково та побачити стек викликів і контекст виконання. **Ключове:** `debugger` спрацьовує тільки при відкритих DevTools або активному відладчику.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Коротке визначення > `debugger` - спеціальний оператор, який **ставить "точку зупинки" в коді**. > Коли інтерпретатор JavaScript доходить до цього рядка, > виконання **призупиняється**, і розробник може: > > - подивитися значення змінних, > - пройтися по коду покроково, > - побачити стек викликів і контекст виконання. --- ## Синтаксис ```javascript debugger; ``` Немає ні аргументів, ні дужок - просто одне слово. --- ## Приклад 1. Базове використання ```javascript function sum(a, b) { debugger; // ← виконання зупиниться тут return a + b; } sum(2, 3); ``` Що станеться: 1. Якщо DevTools **закрито** → код просто виконається, ніби `debugger` немає. 2. Якщо DevTools **відкрито** → виконання **зупиниться** на рядку з `debugger`. Ти побачиш стан програми, локальні змінні і стек викликів. --- ## Приклад 2. Разом з умовами ```javascript function checkUser(user) { if (!user.isActive) { debugger; // налагодимо тільки "проблемних" користувачів } return user.name; } ``` Так зручно ставити "розумні" точки зупинки - код продовжує працювати, але зупиняється **тільки за потрібних умов**. --- ## Приклад 3. Використання всередині циклу ```javascript for (let i = 0; i < 5; i++) { if (i === 3) debugger; // призупиниться тільки на i=3 console.log(i); } ``` Вивід у консолі (при відкритих DevTools): ```javascript 0 1 2 ``` а потім виконання зупиниться на `i = 3`, і ти можеш переглянути змінні, стек і контекст. --- ## Приклад 4. Налагодження async/await і промісів ```javascript async function fetchData() { const response = await fetch("https://example.com"); debugger; // можна подивитися вміст response перед JSON const data = await response.json(); return data; } fetchData(); ``` Дуже зручно перевіряти, **що саме повернув сервер**, не чекаючи помилок чи логів. --- ## Приклад 5. Використання в реальному налагодженні ```javascript try { const user = JSON.parse('{"name":"Tom"}'); console.log(user); } catch (err) { debugger; // при помилці можна одразу проаналізувати err console.error("Помилка:", err); } ``` Якщо JSON виявиться некоректним, відладчик відкриється і покаже вміст `err`, рядок помилки і стек викликів. --- ## Як виглядає "зупинка" в браузері Коли виконання доходить до `debugger`: - програма **ставиться на паузу**; - у **Chrome DevTools** або **VS Code** відкривається панель "Debugger"; - ти можеш: - дивитися **Scope Variables** (локальні, глобальні, замикання), - бачити **Call Stack**, - виконувати код у **Console**, - переходити крок за кроком (`Step over`, `Step into`, `Step out`). --- ## 6. Різниця між `debugger` і `console.log()` | Особливість | `console.log()` | `debugger` | |---|---|---| | Показує значення | Так | Так (в UI відладчика) | | Зупиняє виконання | Ні | Так | | Показує стек викликів | Частково (через `.trace()`) | Повністю | | Працює без DevTools | Так | Ні | | Змінює стан змінних | Ні | Можна прямо під час налагодження | --- ## 7. Важливі зауваження - Якщо DevTools **не відкрито** - `debugger` **не впливає** на виконання програми. - У продакшені код із `debugger` потрібно **видаляти** (або вимикати через прапорці збірки). - Можна використовувати в поєднанні з **умовами**, щоб зупинка відбувалася тільки в певних ситуаціях. --- ## Підсумок | Що робить | Опис | |---|---| | `debugger` | Зупиняє виконання коду | | **Коли спрацьовує** | Тільки при відкритих DevTools або активному відладчику | | **Що можна робити під час паузи** | Дивитися змінні, стек викликів, покроково виконувати код | | **Коли використовувати** | При складних логічних помилках, коли `console.log` уже не допомагає | | **Що не робить** | Не виводить інформацію в консоль і не впливає на код без DevTools |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.