JavaScript:
Використання дебагера
Як:
Ось шматочок коду JavaScript, який поводиться не так, як очікувалось:
function buggyMultiply(a, b) {
return a + b; // Ой! Тут мала бути множення, а не додавання.
}
let result = buggyMultiply(5, 3);
console.log('Результат:', result);Вивід некоректний:
Результат: 8Давайте знайдемо помилку за допомогою Chrome DevTools:
- Відкрийте цей JS у браузері.
- Клацніть правою кнопкою миші та виберіть “Inspect” (Огляд) для відкриття DevTools.
- Натисніть вкладку “Sources” (Джерела).
- Знайдіть ваш фрагмент коду або сторінку та встановіть точку зупинки, клацнувши на номері рядка поруч з оператором
return. - Оновіть сторінку, щоб активувати точку зупинки.
- Перевірте панель “Scope” (Область), щоб побачити локальні змінні
aтаb. - Прокрокуйте за допомогою кнопки “Step over next function call” (Пропустити виклик наступної функції).
- Виявіть помилку в операторі
return. - Виправте код:
function buggyMultiply(a, b) {
return a * b; // Виправлено!
}
let result = buggyMultiply(5, 3);
console.log('Результат:', result);Виправлений вивід:
Результат: 15Поглиблене вивчення
Концепція дебагінгу існує з ранніх днів обчислювальної техніки — легенда каже, що вона почалася, коли в комп’ютері знайшли метелика у 1940-х роках! Сьогодні дебагери JavaScript, як вбудовані інструменти браузера (Chrome DevTools, інструменти розробника Firefox) або дебагери, інтегровані в IDE (Visual Studio Code, WebStorm), пропонують безліч функцій.
Альтернативи вбудованим дебагерам включають сторонні інструменти, як-от WebStorm, або використання доброго старого console.log для виведення станів змінних. Але ці методи не пропонують реальної взаємодії в реальному часі та детального огляду, які забезпечують дебагери.
Що стосується деталей реалізації, то більшість дебагерів працюють подібно: вони дозволяють вам встановлювати точки зупинки, які призупиняють виконання, крокувати по коду, інспектувати поточні стани змінних, спостерігати за виразами та навіть маніпулювати значеннями на льоту, щоб тестувати різні сценарії.