Отладка

Отладка — это поиск и исправление ошибок в программе. Ошибки бывают у всех, даже у опытных разработчиков, поэтому важно не их отсутствие, а умение быстро найти причину. Для этого у JavaScript и браузера есть простые и надёжные инструменты.

Читайте сообщение об ошибке

Сообщение об ошибке — первая подсказка. В нём есть вид ошибки, текст и место в коде: имя файла, номер строки и столбца. В консоли браузера оно выглядит примерно так:

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at showUser (app.js:3:22)
    at app.js:7:1

Здесь сказано: на строке 3 файла app.js, в функции showUser, у значения undefined пытались прочитать свойство name. Список строк ниже — стек вызовов: какие функции были вызваны по пути к ошибке.

console.log

Самый простой способ понять, что происходит, — вывести значения в консоль. Подпись перед значением помогает не запутаться, когда выводов много:

const prices = [120, 80, 300];
const total = prices.reduce((sum, price) => sum + price, 0);
 
console.log('total:', total); // total: 500

Выводите промежуточные результаты по пути к ошибке: там, где значение впервые оказалось неожиданным, и находится проблема.

Проверяйте тип

Многие ошибки возникают, когда значение оказалось не того типа, что ожидалось. Например, число пришло из поля формы строкой, и + склеил его вместо сложения:

const quantity = '2';
 
console.log(quantity + 1);         // 21
console.log(typeof quantity);      // string
console.log(Number(quantity) + 1); // 3

typeof сразу показывает, что в переменной строка.

console.error и console.warn

Кроме log(), у консоли есть методы для важных сообщений. console.error() выводит сообщение как ошибку, а console.warn() — как предупреждение. В браузере они подсвечены красным и жёлтым, и их легко найти среди остального вывода:

console.warn('Не задан город, используем значение по умолчанию');
console.error('Не удалось сохранить заказ');

Для массивов объектов удобен console.table() — в браузере он рисует таблицу.

Инструменты разработчика и debugger

В каждом браузере есть инструменты разработчика — панель, которая открывается клавишей F12. На вкладке Sources (Источники) можно щёлкнуть по номеру строки и поставить точку останова: программа остановится на этой строке, и можно посмотреть значения всех переменных. Тот же эффект даёт слово debugger в коде:

function applyDiscount(price, percent) {
  debugger; // здесь выполнение остановится, если открыты инструменты разработчика
  return price - (price * percent) / 100;
}

После остановки код выполняют по одной строке и смотрят, как меняются значения.

Частая ошибка

Если склеить объект со строкой, вместо его содержимого получится [object Object]. Объект выводят отдельным аргументом или превращают в строку через JSON.stringify():

const user = { name: 'Анна', age: 25 };
 
console.log('Пользователь: ' + user);                 // Пользователь: [object Object]
console.log('Пользователь: ' + JSON.stringify(user)); // Пользователь: {"name":"Анна","age":25}

И не забывайте убирать отладочные console.log и debugger, когда ошибка найдена.