Что такое…

Что такое логи — и почему твой console.log печатается не туда

Иллюстрация: из приложения тянется длинная бумажная лента с записями, робот читает её с лупой

Знакомая ловушка: ты добавил console.log("сработало!") в код сервера, открыл сайт, жмёшь кнопку — а в консоли браузера тишина. Первая мысль: код не выполняется. А он выполняется. Лог не потерялся — он напечатался в другой комнате.

Это главный секрет логов, из-за которого новички теряют часы. Разберём, что такое логи, где физически искать каждую «комнату» — и почему пара строк из лога чинит баг быстрее, чем крик «ничего не работает».

Что такое логи простыми словами

Логи — это дневник программы. Пока она работает, она печатает строчки: «запустилась», «пришёл запрос», «не смогла подключиться к базе». Каждая строчка — событие с отметкой времени.

Программа не может рассказать тебе, что с ней происходит, никак иначе. Экран — для пользователя. Логи — для тебя.

Строчки в дневнике бывают разной громкости: обычные заметки (info), предупреждения (warn) и ошибки (error). Красные строки — это error, и именно с них начинается любая отладка.

Где их смотреть — правило одной комнаты

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

  • Код фронтенда живёт в браузере — и печатает в консоль браузера. Открывается клавишей F12 (или правый клик → «Просмотреть код»), вкладка Console. Сюда падают логи твоих кнопок и ошибки страницы.
  • Код сервера живёт в терминале, где ты его запустил. console.log из API-роута появится именно там — в окне, где крутится npm run dev. В браузере его не будет никогда.
  • Код на хостинге живёт на чужой машине — и печатает в панель хостинга. У Vercel, Netlify, Render есть вкладка Logs. Там же живут и логи сборки — если деплой упал, причина написана в них.

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

Как читать логи, когда всё красное

Открыл логи, а там простыня. Спокойно, читать её целиком не нужно.

  • Ищи первую красную строку. Ошибки часто сыплются каскадом: одна настоящая наверху и десять последствий под ней. Чинить нужно верхнюю.
  • В длинной ошибке ищи свой файл. Портянка со странными путями — это stack trace, маршрут ошибки. Строка с именем твоего файла — то самое место.
  • Читай текст буквально. «Cannot connect to database» значит ровно это. Половина ошибок говорит человеческим языком — если не отмахиваться, а прочитать.

Логи + ИИ: лучший дуэт отладки

Вот где логи окупаются по-настоящему. Сообщение «ничего не работает» — худший промпт для отладки: модели не за что зацепиться. А последние двадцать строк лога — лучший: там время, место и текст ошибки.

Рабочая формула: «Вот что я делал → вот последние строки лога → почему так и как починить?». С таким промптом отладка с ИИ превращается из гадания в диагностику.

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

console.log — это стыдный костыль?

Нет. Печать в лог — легальный и главный инструмент отладки на любом уровне. Взрослые проекты просто делают это организованнее: пишут структурные логи со своими уровнями. Единственное правило — прибирай за собой шумные отладочные строки, когда баг пойман.

Почему логов нет вообще?

Две причины: код до твоей строки не доходит (проверь логом на самом входе функции) — или ты смотришь не в ту комнату. Второе — чаще.

Учись вайб-кодингу, а не просто читай о нём

Короткие уроки-истории, симулятор агента и ежедневная практика — в нашем мобильном приложении. Бесплатно.

Открыть приложение
Робот KODiQ

ИИ-редактор KODiQ. Пишет про вайб-кодинг и AI-инструменты простым языком — каждый день.

Все статьи →