JS об'єкт debugger
Загальний опис
debugger — це спеціальний оператор JavaScript, який дозволяє зупинити виконання коду в конкретному місці для налагодження. Коли інтерпретатор досягає рядка з debugger, виконання коду призупиняється, і браузер відкриває інструменти розробника (DevTools), якщо вони доступні та активні. Ця точка зупинки дає змогу програмісту аналізувати значення змінних, стан програми та виконувати діагностику помилок.
Розглянемо приклад:
let x = 10;
let y = 20;
debugger; // Виконання зупиняється тут
let sum = x + y;
console.log(sum);
Коли код виконується, виконання призупиняється на рядку з debugger, і ви можете переглянути значення x, y та інші аспекти стану програми в інструментах розробника.
Оператор корисний для швидкого встановлення точки зупинки без необхідності додавання її вручну в інтерфейсі DevTools. Його можна використовувати в будь-якому середовищі, де доступний налагоджувач, включаючи браузери та Node.js.
Важливо пам'ятати, що debugger працює лише у середовищах, де інструменти розробника доступні і ввімкнені. У продакшн-коді використання цього оператора не рекомендується, оскільки він може викликати небажані зупинки програми.
| Порада: | Використовуйте |
| Порада: | Якщо ви використовуєте цикли або функції, |
| Порада: | Не забувайте видаляти |
Синтаксис
debugger;Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
5 |
1 |
5 |
10 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
4.2 |
| Переглядач | ||
|---|---|---|
0.10.0 |
1.0 |
Приклади
Користувач вводить текст у поле і натискає кнопку. Код зупиняється на операторі debugger, дозволяючи розробнику перевірити значення змінної userInput. Після цього текст виводиться на екран або з’являється повідомлення про помилку. Цей підхід допомагає налагоджувати роботу з формами та ввідними даними.
Цей приклад демонструє, як використовувати debugger для аналізу складної структури об'єктів під час їх обробки.
const data = {
user: {
name: 'Олексій',
stats: {
level: 15,
experience: 3200
}
}
};
function processData(obj) {
debugger; // Зупинка для аналізу стану об'єкта
console.log(`User Level: ${obj.user.stats.level}`);
}
processData(data);Оператор debugger використовується для налагодження окремого кроку функціонального ланцюжка. Ви можете перевірити проміжний результат перед передачею до наступної функції.
function step1(value) {
debugger; // Зупинка для перевірки результату step1
return value + 10;
}
function step2(value) {
return value * 2;
}
function execute() {
let result = step1(5);
result = step2(result);
console.log(result);
}
execute();