debugger у JavaScript — точка зупинки просто в коді
Загальний опис
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 працює лише у середовищах, де інструменти розробника доступні і ввімкнені. У продакшн-коді використання цього оператора не рекомендується, оскільки він може викликати небажані зупинки програми.
- Порада
-
Використовуйте
автор: Bonddebuggerдля тимчасового налагодження складних ділянок коду, де важливо побачити стан програми перед виконанням певного кроку. - Порада
-
Не забувайте видаляти
автор: Bonddebuggerперед публікацією коду у продакшн. Для цього можна використовувати інструменти автоматизації, такі як ESLint або Webpack. - Порада
-
Якщо ви використовуєте цикли або функції,
debuggerдопоможе аналізувати значення змінних на кожній ітерації чи виклику. Наприклад:
автор: Bondfor (let i = 0; i < 5; i++) { debugger; // Зупинка на кожній ітерації }
Синтаксис
debugger;Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 5 | 1 | 5 | 10 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 4.2 |
| Переглядач |  |
 |
|---|---|---|
| 0.10.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє, як використовувати 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();Користувач вводить текст у поле і натискає кнопку. Код зупиняється на операторі debugger, дозволяючи розробнику перевірити значення змінної userInput. Після цього текст виводиться на екран або з’являється повідомлення про помилку. Цей підхід допомагає налагоджувати роботу з формами та ввідними даними.
HTML
<header>
<h2 class="title">debugger</h2>
<p class="description">Зупиняє виконання коду для аналізу стану програми.</p>
</header>
<main>
<div class="result">
<!-- Поле вводу та кнопка -->
<label for="userInput">Введіть текст:</label>
<input type="text" id="userInput" placeholder="Ваш текст тут" />
<button id="processButton">Обробити</button>
<!-- Виведення результату -->
<p id="output"></p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
input {
display: block;
margin-bottom: 10px;
padding: 5px;
width: 100%;
max-width: 300px;
font-size: 16px;
}
button {
padding: 8px 12px;
font-size: 16px;
cursor: pointer;
background-color: #0078d7;
color: #fff;
border: none;
border-radius: 4px;
}
button:hover {
background-color: #005bb5;
}
#output {
margin-top: 20px;
font-weight: bold;
}JS
// Отримання елементів
const inputField = document.getElementById('userInput');
const processButton = document.getElementById('processButton');
const output = document.getElementById('output');
// Обробка кнопки
processButton.addEventListener('click', () => {
const userInput = inputField.value.trim(); // Отримання значення
debugger; // Зупинка для аналізу введених даних
// Перевірка, чи поле вводу не пусте
if (userInput) {
output.textContent = `Ви ввели: "${userInput}"`;
} else {
output.textContent = 'Поле вводу порожнє. Введіть текст!';
}
});
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!