Как искать ошибку в коде: пошаговая отладка первого проекта

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

Сделайте ошибку воспроизводимой

«Корзина сломалась» — слишком общее сообщение. «При ценах 100 и 50 функция возвращает 50 вместо 150» уже задаёт проверку. Сохраните исходный ввод и повторите запуск. Если проблема возникает не каждый раз, отметьте условия: порядок действий, состояние данных, устройство или браузер. Ожидаемый результат должен опираться на требования. Иногда программа работает последовательно, но сам автор по-разному понимает правило. Поэтому перед исправлением важно согласовать, что именно считать правильным поведением.

Уменьшите пример

Рассмотрим учебную функцию с логической ошибкой. Она не падает, но вместо суммы возвращает последнее значение:

function sumPrices(prices) {
  let total = 0;
  for (const price of prices) {
    total = price;
  }
  return total;
}

На каждой итерации прежняя сумма заменяется очередной ценой. Для [100, 50] сначала total равно 100, затем 50. Большой интерфейс корзины не нужен, чтобы увидеть причину: достаточно маленькой функции и двух чисел.

Проверьте одну гипотезу

Гипотеза: сумму нужно увеличивать, а не заменять. Меняем одну строку и снова запускаем тот же пример:

function sumPrices(prices) {
  let total = 0;
  for (const price of prices) {
    total += price;
  }
  return total;
}

Теперь результат для [100, 50] равен 150. Но на одном удачном наборе проверка не заканчивается. Протестируйте пустой список и одно значение. Затем решите, какие типы ввода допустимы: строки "100" и "50" потребуют отдельного решения, а не случайной надежды на автоматическое преобразование.

Для наблюдения можно временно вывести total до и после обновления вместе с текущим price. Если вместо числа приходит строка, проверьте тип значения в месте получения данных. Удаляйте диагностический вывод после проверки, чтобы он не засорял обычную работу.

Отличайте типы ошибок

Читайте сообщение ошибки целиком, но не пытайтесь сразу исправить все вторичные последствия. Одно пропущенное объявление может породить цепочку других сообщений. Не публикуйте в вопросах и скриншотах токены, пароли и персональные данные.

Как просить помощь у человека или нейросети

Покажите минимальный пример, вход, ожидаемый и фактический результат. Попросите объяснить конкретный переход, а не написать новую версию без разбора. После подсказки повторите проверку самостоятельно и добавьте один случай, которого в объяснении не было. Для подростка полезно сохранять короткий журнал: симптом, гипотеза, изменение, результат. На треке full-stack разработки такой пример можно принести преподавателю. Умение разобраться в небольшой ошибке важнее случайно заработавшего большого проекта, устройство которого автор не понимает.

Читайте также: Программирование для подростков: как выбрать курс и проверить результат.