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 для тимчасового налагодження складних ділянок коду, де важливо побачити стан програми перед виконанням певного кроку.

автор: Bond правити

Порада

Не забувайте видаляти debugger перед публікацією коду у продакшн. Для цього можна використовувати інструменти автоматизації, такі як ESLint або Webpack.

автор: Bond правити

Порада

Якщо ви використовуєте цикли або функції, debugger допоможе аналізувати значення змінних на кожній ітерації чи виклику. Наприклад:

for (let i = 0; i < 5; i++) {
  debugger; // Зупинка на кожній ітерації
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

debugger;

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	5	1	5	10	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	4.2

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const data = {
  user: {
    name: 'Олексій',
    stats: {
      level: 15,
      experience: 3200
    }
  }
};

function processData(obj) {
  debugger; // Зупинка для аналізу стану об'єкта
  console.log(`User Level: ${obj.user.stats.level}`);
}

processData(data);

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();