Пошук уроків, статей та іншого контенту
Як швидко знаходити та аналізувати помилки в JavaScript
Помилки — нормальна частина програмування.
Головна навичка розробника полягає не в тому, щоб ніколи не створювати помилок, а в тому, щоб уміти швидко знаходити їх причину.
const user = {
name: "Anna"
};
console.log(user.age.toString());Оскільки age відсутнє:
user.ageповерне:
undefinedПотім програма спробує викликати:
undefined.toString()і виникне помилка.
У Console ви можете побачити повідомлення на кшталт:
TypeError: Cannot read properties of undefined
at app.js:5:22TypeErrorПідказує категорію проблеми.
Cannot read properties of undefinedПояснює, що операція була виконана над undefined.
app.jsПоказує, де виникла проблема.
5:22Зазвичай означає:
рядок 5
колонка 22У DevTools часто можна натиснути на це посилання й перейти прямо до проблемного місця.
Виникає через неправильний синтаксис.
const name = ;Наприклад:
SyntaxError: Unexpected token ';'Перевіряйте:
дужки;
лапки;
коми;
оператори;
структуру виразу.
console.log(userName);Якщо userName не існує:
ReferenceError: userName is not definedЧасті причини:
помилка в назві;
змінну не оголошено;
неправильна область видимості.
Наприклад:
const user = null;
console.log(user.name);Спроба отримати властивість у null призведе до TypeError.
Для вкладених функцій:
function loadUser() {
renderUser();
}
function renderUser() {
showName();
}
function showName() {
console.log(user.name);
}
loadUser();Console може показати ланцюжок викликів:
showName
renderUser
loadUserЦе stack trace.
Він допомагає зрозуміти не лише де сталася помилка, а й як програма дійшла до цього місця.
Коли бачите error:
Прочитайте тип помилки.
Прочитайте повідомлення повністю.
Знайдіть файл і номер рядка.
Перевірте значення змінних у цьому місці.
Подивіться stack trace.
Знайдіть перший рядок stack trace, який належить вашому коду.
Спробуйте відтворити проблему ще раз.
Наприклад, додайте:
console.log(user);
console.log(user.age);або поставте breakpoint.
Припустимо:
Cannot read properties of undefinedПоганий підхід — одразу всюди додавати:
?. наприклад:
user?.profile?.nameСпочатку потрібно зрозуміти:
Чому
userабоprofileдорівнюєundefined?
Можливо, саме це і є справжня помилка.
Ігнорувати текст error message. Часто відповідь уже частково міститься в ньому.
Дивитися лише на останній рядок stack trace. Корисніше знайти місце, яке належить вашому коду.
Одразу шукати весь текст помилки в Google. Спочатку прочитайте власний код і значення змінних.
Боятися червоних повідомлень. Error — це діагностична інформація, а не катастрофа.
Навчіться бачити в повідомленні про помилку структуру:
тип
+
повідомлення
+
файл
+
рядок
+
stack traceЗамість:
«Код не працює»
ставте конкретніше питання:
«Яке значення програма отримала, де воно з'явилося і чому операція з ним неможлива?»
Це одна з найважливіших навичок професійного розробника.