Вступ

JavaScript — одна з найпотужніших і найбільш універсальних мов програмування сьогодення, яка стоїть за всім: від простих вебсайтів до складних веб-додатків. Однак, як і будь-яка велика сила, вона несе в собі велику відповідальність — і іноді й складні баги! Незалежно від того, чи ви тільки починаєте свій шлях програміста, чи вже маєте великий досвід, відлагодження JavaScript може здатися дуже складним.

Але не хвилюйтеся — відлагодження це не лише знаходження та виправлення помилок; це мистецтво, яке розвиває ваші навички вирішення проблем і поглиблює розуміння коду. У цьому посібнику ми розглянемо основи відлагодження JavaScript, розкриємо інструменти та техніки, які роблять процес простішим, і допоможемо вам здобути впевненість для вирішення будь-якої проблеми. Наприкінці ви побачите, як відлагодження може перетворити вас із розчарованого програміста в героя кодування!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Що таке відлагодження?

Відлагодження — це процес виявлення, аналізу та усунення багів або помилок у вашому коді. В JavaScript помилки можуть виникати з різних причин — синтаксичні помилки, логічні недоліки або неочікуваний вхід даних. Відлагодження допомагає не лише виправити код, але й покращити ваші навички вирішення проблем і глибше зрозуміти JavaScript.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Розповсюджені типи помилок у JavaScript

Перед тим як зануритися в процес відлагодження, давайте розглянемо деякі з найпоширеніших типів помилок:

1. Синтаксичні помилки:

• Виникають, коли ваш код порушує правила синтаксису JavaScript.
• Приклад:

➤ console.log(“Hello World) // Відсутня закриваюча лапка

Виправлений код: console.log(“Hello World”);

1. Помилки під час виконання:

• Виникають, коли код синтаксично правильний, але не виконується під час роботи.
• Приклад:

➤ let num = undefined;
console.log(num.toUpperCase()); //TypeError: num.toUpperCase is not a function

Виправлений код:
let str = “Hello”;
console.log(str.toUpperCase()); // Виводить: HELLO

1. Логічні помилки:

• Виникають, коли код працює без збоїв, але дає неправильні результати.
• Приклад:

➤ function add(a, b) {
return a — b; [Неправильний оператор]
}
console.log(add(5, 3)); [Виводить 2 замість 8]

Виправлений код:
function add(a, b) {
return a + b; // Правильний оператор
}
console.log(add(5, 3)); // Виводить: 8

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Покрокова інструкція для відлагодження JavaScript

1. Зрозумійте повідомлення про помилку

Помилки в JavaScript часто супроводжуються детальними повідомленнями в консолі. Навчіться читати та інтерпретувати ці повідомлення:

• Тип помилки: Який тип помилки (наприклад, SyntaxError, ReferenceError).
• Місце: Файл і номер рядка, де сталася помилка.
• Опис: Деталі того, що пішло не так.

Приклад: Uncaught ReferenceError: myVariable is not defined at script.js:10:15

Це означає, що myVariable було згадано в рядку 10 файлу script.js, але вона не була визначена.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

1. Використовуйте console.log() для відлагодження

Найпростіший спосіб відлагодити JavaScript — це вивести повідомлення в консоль.

• Визначення значень змінних:

➤ let num = 5;
console.log(“Значення num:”, num);

• Відстеження потоку програми:

➤ console.log(“Функція почалась”);
myFunction();
console.log(“Функція завершилась”);

Однак намагайтеся не використовувати console.log() надмірно, оскільки це може заповнити консоль у великих додатках.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

3.

Використання інструментів розробника в браузері

Сучасні браузери оснащені потужними інструментами розробника, які допомагають у відлагодженні JavaScript.

• Доступ до DevTools: Клацніть правою кнопкою миші на вебсторінці → Інспектувати → Перейдіть на вкладку “Console” або “Sources”.
• Встановлення точок зупину: Зупиніть виконання коду на конкретних рядках, щоб перевірити значення змінних і стан програми.

На вкладці “Sources” клацніть на номер рядка, щоб встановити точку зупину.

• Перехід по коду: Використовуйте кнопки “Step Over”, “Step Into” та “Step Out”, щоб переходити по коду.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

4. Відлагодження за допомогою try...catch

Обробляйте помилки під час виконання за допомогою блоків try...catch.

try {  
 let result = riskyFunction();  
 console.log(result);  
} catch (error) {  
 console.error(“Сталася помилка:”, error.message);  
}  

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

5. Перевірка вводу

Неочікуваний вхід даних часто призводить до помилок. Завжди перевіряйте дані перед їх обробкою.

function divide(a, b) {  
 if (typeof a !== “number” || typeof b !== “number”) {  
 throw new Error(“Вхідні дані повинні бути числами”);  
 }  
 return a / b;  
}  
console.log(divide(10, “2”)); // Генерує помилку  

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

6. Використання інструментів лінтингу

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

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

7. Використання інструментів і розширень для відлагодження

• Дебагер Node.js: Використовуйте вбудований дебагер для серверного JavaScript.

➤ node inspect script.js  

• Дебагер Visual Studio Code: Популярний вибір для відлагодження як фронтенд, так і бекенд JavaScript.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Кращі практики для відлагодження JavaScript

1. Пишіть чистий код: Дотримуйтесь кращих практик при іменуванні, форматуванні та структурі коду.
2. Розділяйте проблеми: Розв'язуйте помилки крок за кроком, щоб не перевантажити себе.
3. Коментуйте код: Додавайте коментарі для пояснення складної логіки.
4. Тестуйте часто: Запускайте код після написання невеликих частин, щоб швидко виявити помилки.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Приклад відлагодження в реальному житті

Давайте відлагодимо просту функцію:

Проблемний код:

function greet(name) {  
 return “Hello, “ + names + “!”; // Помилка в імені змінної  
}  
console.log(greet(“Sakib”)); // Помилка  

Кроки для відлагодження:

1. Відкрийте консоль браузера, щоб перевірити повідомлення про помилку:

• ReferenceError: names is not defined.

1. Знайдіть помилку в функції.

2. Виправте код:

function greet(name) {  
 return “Hello, “ + name + “!”;  
}  
console.log(greet(“Sakib”)); // Виводить: Hello, Sakib!  

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Висновок

Відлагодження JavaScript — це навичка, яка покращується з практикою і терпінням. Розуміючи повідомлення про помилки, використовуючи інструменти відлагодження і дотримуючись кращих практик, ви зможете впевнено вирішувати будь-яку помилку, що трапиться. Пам’ятайте, кожна помилка — це можливість навчитися і стати кращим розробником.

Якщо цей посібник був корисним, підписуйтесь на мене для отримання додаткових порад з кодування, відлагодження та розвитку. Разом ми зробимо процес відлагодження легким!

Перекладено з: Beginner’s Guide to Debugging JavaScript