Отладка в браузере

Самый доступный инструмент отладки уже встроен в ваш код — это console.log. Он печатает любое значение в консоль браузера (она открывается клавишей F12, а на Mac — Cmd+Option+J).

const total = 2 + 2;
console.log(total);

Печатать наугад малополезно. У опытных разработчиков есть стратегия: логировать входы и выходы функции и помечать каждый вывод меткой — иначе в потоке одинаковых цифр быстро запутаешься. Вот функция скидки, которая почему-то возвращает NaN:

function discount(price, percent) {
  console.log("входы:", price, percent);
  return price - (price * percent) / 100;
}
console.log("выход:", discount(1000));

Метка «входы» сразу выдаёт виновника: percent пришёл как undefined, потому что функцию вызвали с одним аргументом вместо двух. Формула ни при чём — и мы узнали это за один запуск, не перечитывая код.

const users = [{ name: "Аня" }, { name: "Боря" }];
console.table(users);
console.error("что-то пошло не так");

console.log показывает отдельные снимки, а иногда хочется поставить фильм на паузу и осмотреться. Для этого есть оператор debugger: если инструменты разработчика открыты, выполнение замрёт на этой строке — со всеми переменными, доступными для изучения.

function greet(name) {
  debugger; // пауза здесь, если открыт DevTools
  return `Привет, ${name}!`;
}
console.log(greet("Ира"));

Если DevTools закрыт, строка тихо игнорируется, поэтому случайно «сломать» страницу пользователю debugger не может. Но перед публикацией кода его всё равно принято убирать — как строительные леса после ремонта.

Оператор debugger требует править код. Панель Sources в DevTools умеет то же самое без правок: откройте вкладку Sources, найдите свой файл и кликните по номеру нужной строки — на нём появится синяя метка, брейкпоинт. Как только выполнение дойдёт до этой строки, программа встанет на паузу.

Во время паузы справа появляется панель Scope — все переменные, видимые в этой точке: локальные, из замыкания, глобальные. А если навести курсор на имя переменной прямо в коде, её текущее значение всплывёт подсказкой. Дальше выполнением управляют кнопки:

Over — мимо, Into — внутрь

В Scope показывается всё подряд, а вас часто интересует одно конкретное значение. Добавьте его во вкладку Watch: нажмите «+» и впишите любое выражение — items.length, price * qty, что угодно на JavaScript.

DevTools будет пересчитывать это выражение после каждого шага. Так удобно ловить момент, где значение неожиданно меняется: вы шагаете по строкам и смотрите на одну цифру, а не сканируете глазами весь Scope.

Любой поиск бага сводится к трём шагам. Сначала — воспроизвести: найти действия, после которых ошибка повторяется каждый раз; плавающий баг ловить бесполезно. Затем — сузить: логами или брейкпоинтами найти строку, где данные из правильных превращаются в неправильные. И наконец — проверить гипотезу: предположить причину и подтвердить её экспериментом. Посмотрим на живом примере — функция должна считать среднее, но возвращает NaN:

function average(nums) {
  let sum = 0;
  for (let i = 0; i <= nums.length; i++) sum += nums[i];
  return sum / nums.length;
}
console.log(average([2, 4, 6]));

Ошибка воспроизводится стабильно — первый шаг готов. Сужаем: раз итог NaN, в сумму попало что-то нечисловое. Логируем каждый шаг цикла:

const nums = [2, 4, 6];
for (let i = 0; i <= nums.length; i++) {
  console.log(i, nums[i]);
}

Вот и гипотеза, она же разгадка: условие i <= nums.length делает один лишний шаг, nums[3] — это undefined, а число плюс undefined даёт NaN. Меняем <= на < — и функция честно возвращает 4.