Дебаг без паники
Как чинить ошибки, когда AI сломал код. Практический гайд для тех, кто не программист.
Ты написал промпт. AI сгенерировал код. Ты вставил его, нажал запуск — и вместо рабочего сайта увидел белый экран, красный текст или вообще ничего.
Это нормально. Ошибки — часть процесса. У всех. Всегда.
Этот гайд — про то, что делать в такие моменты. Без теории программирования. Без сложных терминов. Просто алгоритм: случилось → делаю вот это → работает.
Алгоритм «Что делать, когда всё сломалось»
Пять шагов. Запомни их один раз — и ты перестанешь бояться ошибок.
Стоп. Ничего не трогай
Когда что-то сломалось, первый порыв — быстро что-то исправить, написать ещё один промпт, поменять код наугад. Не надо.
Каждое случайное изменение — это ещё один слой проблем поверх первой. Через три таких «быстрых фикса» ты уже не понимаешь, что было изначально, что ты поменял и где вообще проблема.
Прочитай ошибку
Красный текст в консоли — это не ругательство. Это подсказка. Буквально. Там написано, что пошло не так и часто — где именно.
Тебе не нужно понимать каждое слово. Достаточно найти:
- Название ошибки — обычно первая строка или выделенное слово (TypeError, SyntaxError, 404 и т.д.)
- Описание — текст после названия, который говорит, что случилось
- Номер строки — часто указан как line 42 или file.js:42:15
Если текста много — смотри на самый верх или самый низ. Главное обычно там.
Вспомни, что ты менял последним
В 80% случаев причина ошибки — последнее изменение, которое ты внёс. Если до этого всё работало, а после твоего промпта сломалось — проблема скорее всего в том, что AI нагенерировал.
- Что именно я попросил AI сделать?
- Какие файлы изменились?
- Работало ли до этого изменения?
Попроси AI починить — правильно
Не пиши «сломалось, почини». Это как прийти к врачу и сказать «болит, лечи». Чем точнее опишешь — тем быстрее починит.
Вот что я пытался сделать: [описание задачи] Вот что я сделал: [какой промпт дал / что изменил] Вот что произошло: [белый экран / ошибка / не работает кнопка] Вот текст ошибки: [вставить ошибку целиком] Помоги найти и исправить проблему. Объясни, что было не так.
Откати и попробуй иначе
Если AI не починил с первого-второго раза — не продолжай цикл «промпт → ошибка → промпт → ошибка». С каждой итерацией код становится всё запутаннее, а AI начинает ломать ещё больше.
Лучшая стратегия — вернуться к рабочей версии и подойти к задаче с другой стороны.
- Ctrl+Z / Cmd+Z (отмена) — если изменения были только что
- Git — если делал коммиты (смотри раздел «Git как машина времени»)
- Скопировать рабочую версию из истории чата с AI — если она там осталась
- В Cursor / другой AI-IDE: посмотри историю файла (Timeline / Local History)
Как читать ошибки
Ошибки выглядят страшно, но большинство из них говорят очень простые вещи. Вот самые частые — на человеческом языке.
Ошибки в коде (JavaScript / React / Node.js)Где-то в коде опечатка — лишняя скобка, забытая запятая, незакрытая кавычка.
Как если бы в предложении забыли поставить точку и начали новое с маленькой буквы — компьютер не может «прочитать» код.
Код пытается взять что-то из переменной, в которой ничего нет.
Ты открываешь холодильник за молоком, а холодильника нет. Не молока — а самого холодильника.
Код пытается вызвать как функцию что-то, что функцией не является.
Ты пытаешься позвонить по книге. Книга — не телефон.
Код использует переменную или функцию, которая нигде не создана.
Ты просишь передать соль Васю, а Васи за столом нет. Никто не знает, кто такой Вася.
Код подключает библиотеку, которая не установлена.
Ты пытаешься открыть приложение, которое не скачивал. Сначала установи.
Код ищет файл, которого нет по указанному пути.
Ты ищешь документ в папке «Работа», а папки «Работа» не существует.
Ошибка в JavaScript-коде — страница «упала» до того, как успела отрисоваться.
Открой консоль браузера: F12 (Win) / Cmd+Option+I (Mac) → вкладка Console. Там будет красный текст с ошибкой.
Страница или файл не найдены по этому адресу.
Ты набрал адрес квартиры, а такой квартиры в доме нет. Проверь URL.
Сервер сломался при обработке запроса. Проблема не у тебя в браузере, а на бэкенде.
Ты позвонил в службу доставки, а у них компьютер завис. Ты всё сделал правильно — проблема на их стороне.
Браузер заблокировал запрос к другому сайту/серверу из соображений безопасности.
Ты пытаешься пройти в чужой офис, а охрана не пускает — тебя нет в списке.
Сервер не запущен или недоступен.
Ты звонишь в магазин, а он закрыт.
Конфликт версий библиотек — одна требует одну версию, другая — другую.
Попроси AI исправить, покажи полный текст ошибки.
У тебя нет прав на выполнение этого действия.
На Windows — запусти терминал от администратора. На Mac/Linux — добавь sudo перед командой.
Другая программа уже занимает этот порт.
Закрой другие запущенные серверы или перезагрузи компьютер.
Промпты для дебага
Готовые формулировки. Копируй и подставляй свои данные.
Общий дебаг (когда есть текст ошибки)
Я работаю над [кратко описать проект, например: лендингом для фитнес-клуба]. После последнего изменения ([кратко что менял, например: добавил форму обратной связи]) появилась ошибка. Вот полный текст ошибки: [вставить ошибку] Что это значит простыми словами? Как это исправить? Покажи исправленный код.
Когда нет ошибки, но не работает
Я работаю над [описание проекта]. Проблема: [описать что именно не работает, например: «кнопка 'Отправить' не реагирует на нажатие» или «страница загружается, но блок с ценами пустой»]. Ошибок в консоли нет. Вот код компонента/файла, где должна быть эта логика: [вставить код] Найди, почему не работает, и покажи исправленный вариант.
Когда AI уже пытался починить и стало хуже
У меня была ошибка: [описание первоначальной проблемы]. Ты предложил решение, но после его применения появилась новая ошибка: [вставить новую ошибку] Давай вернёмся на шаг назад. Вот оригинальный код до всех изменений: [вставить оригинальный рабочий код или описать его] И вот задача, которую я изначально пытался решить: [описать задачу] Предложи другой подход к решению.
Когда непонятно вообще ничего
Я новичок и не понимаю, что происходит. Помоги разобраться. Я пытался: [что хотел сделать] Я сделал: [что конкретно делал] Результат: [что вижу на экране] Объясни максимально простым языком: 1. Что пошло не так 2. Почему 3. Как исправить (пошагово)
Превентивный (перед внесением изменений)
Я хочу добавить [описание фичи] в свой проект. Вот текущий код: [вставить код] Прежде чем вносить изменения, скажи: 1. Какие файлы нужно будет изменить? 2. Может ли это сломать что-то из того, что уже работает? 3. Какой самый безопасный способ это сделать?
Чек-лист: перед тем как просить AI починить
Пробегись по этим пунктам за 30 секунд. Часто проблема решается без AI.
Топ-20 ошибок новичка
Если узнал свою ситуацию — сразу бери решение.
Белый экран после изменений
→ F12 (Win) / Cmd+Option+I (Mac) → Console, скопируй ошибку, покажи AI
npm install завершается с ошибками
→ Удали папку node_modules и файл package-lock.json, запусти npm install заново
Сайт не обновляется после изменений
→ Ctrl+Shift+R (Win) / Cmd+Shift+R (Mac). Не помогло — перезапусти сервер
Module not found — модуль не найден
→ npm install [имя-пакета]. Имя — то, что написано после «Can't resolve»
Кнопка не работает, ошибок нет
→ Проверь обработчик клика (onClick). Покажи AI код кнопки
Стили не применяются
→ CSS подключён? Имена классов верные? Button и button — разные вещи
Port 3000 is already in use
→ Закрой все терминалы, перезапусти. Или: npm run dev -- --port 3001
Ошибка CORS при запросе к API
→ Проблема сервера. Покажи AI ошибку, попроси добавить CORS-заголовки
Cannot read properties of undefined
→ Переменная пустая. Покажи AI строку с ошибкой и код вокруг
Данные из формы не отправляются
→ Есть ли обработчик отправки? У полей есть name или привязка к состоянию?
Картинка не отображается
→ Проверь путь к файлу (чувствителен к регистру). Попробуй папку public
После деплоя сайт не работает (локально работал)
→ Проверь логи деплоя (Vercel/Netlify показывают). Скопируй ошибку → AI
AI сгенерировал код на другом языке/фреймворке
→ Укажи конкретно: «Используй React + Tailwind» или «на чистом HTML/CSS/JS»
Бесконечная загрузка страницы
→ F12 (Win) / Cmd+Option+I (Mac) → Network. Запросы сыпятся без остановки? Скажи AI «бесконечный цикл запросов»
Код работает, но ужасно выглядит на мобильном
→ Попроси AI: «Сделай этот компонент адаптивным (responsive)»
Unexpected token < в консоли
→ Вместо JS загрузился HTML (страница 404). Проверь пути к файлам
Переменные окружения (.env) не подтягиваются
→ Перезапусти сервер. В React: REACT_APP_, в Next.js: NEXT_PUBLIC_
Git пишет «nothing to commit»
→ Уже закоммитил или не сохранил файл. Проверь git status
Failed to compile — проект не собирается
→ Там указан файл и строка. Скопируй всё и покажи AI
AI «уверенно» починил, но стало хуже
→ Откати (Ctrl+Z / Cmd+Z или git). Переформулируй. Разбей на шаги. Попробуй новый чат
Git как машина времени
Git сохраняет «снимки» твоего проекта. Сломалось — возвращаешься к моменту, когда работало. Три команды, без теории.
Сохранить текущее состояние
Сделать «снимок» проекта. Твоя «точка сохранения» в игре.
git add .
git commit -m "описание что сделал"git commit -m "добавил форму обратной связи" Когда использовать: каждый раз, когда что-то работает. Сделал фичу — работает — сохрани.
Посмотреть историю сохранений
git log --onelineПокажет список всех «снимков»:
a1b2c3d добавил форму обратной связи
e4f5g6h сделал блок с ценами
i7j8k9l первая версия лендингаБуквы и цифры слева — идентификатор снимка. Он нужен для отката.
Вернуться к рабочей версии
Вариант А. Откатить незакоммиченные изменения:
git checkout .Как «загрузить последнее сохранение». Всё, что менял после последнего коммита — исчезнет.
Вариант Б. Вернуться к конкретному коммиту:
git checkout e4f5g6h .Где e4f5g6h — идентификатор из git log --oneline. После не забудь сохранить:
git add .
git commit -m "откатился к рабочей версии"Золотое правило: работает → коммить
git add . → git commit -m "что сделал" — после каждого успешного шага. Тогда всегда есть куда вернуться.
В Cursor git встроен — коммиты можно делать через панель Source Control (иконка с ветками слева).
Три правила, которые спасают от 90% проблем
Если запомнишь только три вещи из этого гайда — пусть это будут эти три.
Маленькие шаги
Не проси AI сделать всё за один промпт. Одна фича → проверил → следующая. Если сломалось — знаешь где.
Работает — коммить
Сделал шаг, работает — git commit. Это 5 секунд, которые спасают часы. Без коммитов ты как игрок без сохранений.
Не чини бесконечно
AI дважды не починил — откатись. Переделать с нуля в вайбкодинге часто быстрее, чем чинить.
Шпаргалка на одну страницу
Распечатай и повесь рядом с монитором
- 1 СТОП. Ничего не трогай. Не паникуй.
- 2 ПРОЧИТАЙ ОШИБКУ. F12 (Win) / Cmd+Option+I (Mac) → Console или терминал. Скопируй красный текст.
- 3 ВСПОМНИ. Что менял последним? До этого работало?
- 4 ПОПРОСИ AI. Что пытался → что сделал → что вижу → текст ошибки → «помоги исправить».
- 5 НЕ ПОЧИНИЛ? Откати (Ctrl+Z / Cmd+Z или git checkout .), переформулируй, разбей на шаги.
| Проверь | Как |
|---|---|
| Файл сохранён? | Ctrl+S / Cmd+S |
| Сервер запущен? | Посмотри в терминал |
| Консоль браузера? | F12 / Cmd+Option+I → Console |
| Правильный URL? | Обычно localhost:3000 |
| Перезапуск сервера? | Ctrl+C (Win и Mac), запусти заново |
| Кеш браузера? | Ctrl+Shift+R / Cmd+Shift+R |
| Что хочу | Команда |
|---|---|
| Сохранить | git add . затем git commit -m "что сделал" |
| История | git log --oneline |
| Откатить | git checkout . |
| Ошибка | Что делать |
|---|---|
| Белый экран | F12 / Cmd+Option+I → Console → скопируй ошибку |
| Module not found | npm install [имя] |
| Port in use | Перезапусти терминал |
| Cannot read undefined | Покажи AI строку ошибки |
| CORS error | Проблема сервера → покажи AI |
| npm install ошибки | Удали node_modules + package-lock.json |
| Не обновляется | Ctrl+Shift+R / Cmd+Shift+R или перезапуск |
Маленькие шаги
Одна фича → проверка
Работает — коммить
git add . && git commit
Не чини бесконечно
2 раза не починил → откати