Сайт сломался после обновления: что делать

Задача

В пятницу вечером Мерве попросила Claude Code добавить блок с отзывами и отправила изменения на GitHub. Через десять минут подруга пишет: «Siten bozulmuş». На телефоне пропали все фото, а кнопка WhatsApp не нажимается. На выходных у Мерве набор на мастер-классы. Ей нужно спокойно вернуть рабочий сайт и потом найти причину, а не паниковать и не переделывать всё с нуля.

Словарик.

• Откат: вернуть на сайт прошлую рабочую версию (урок 4.10).
• DevTools (инструменты разработчика): встроенная в браузер панель, где видно, что сломалось «внутри» страницы.
• Консоль (Console): вкладка DevTools со списком ошибок. Понимать их не нужно, достаточно скопировать и отдать Claude Code.
• Кеш: сохранённая браузером копия сайта. Из-за неё иногда видно старую или «полуобновлённую» версию.

Шаги

1. Сначала откат, потом разбор. Клиенты не должны видеть сломанный сайт, пока ты ищешь причину. Как откатиться на Netlify и Cloudflare и почему потом нужно исправить в git, смотри в уроке 4.10, шаги 5-6. Откатила, выдохнула, дальше без спешки.

2. Убедись, что сломано правда. Открой сайт в режиме инкогнито или на другом устройстве. Если там всё в порядке, проблема в кеше твоего браузера, а не на сайте. Обнови страницу без кеша или очисти данные сайта в настройках браузера.

3. Собери описание ошибки. Claude Code не видит твой экран. Чем точнее описание, тем быстрее исправление. Нужны четыре вещи:

   • Скриншот: что видно сейчас. По документации Claude Code картинку можно перетащить в окно, вставить из буфера (Ctrl+V, на Windows Alt+V) или сохранить в папку проекта (например, bug.png) и указать имя файла в запросе.
   • Что ожидали: «фото в галерее, кнопка WhatsApp открывает чат».
   • Что получили: «серые квадраты вместо фото, кнопка не реагирует».
   • Где и когда: какое устройство и браузер, после какой правки.

4. Открой консоль браузера (на компьютере). По документации Chrome:

   • Windows / Linux: Ctrl+Shift+J открывает сразу консоль; F12 или Ctrl+Shift+I открывает всю панель DevTools.
   • Mac: Cmd+Option+J открывает консоль; Cmd+Option+I открывает DevTools. Сначала щёлкни по странице сайта, потом нажми сочетание. Справа или снизу откроется панель. Во вкладке Console нас интересуют ошибки. Чтобы оставить только их, в выпадающем списке уровней (Log Levels) выбери Error или нажми Errors в боковой панели консоли. Затем правый клик на пустом месте консоли → Copy console, и все сообщения скопируются. Вставь их в запрос Claude Code. ⚠️ Перед отправкой посмотри, нет ли в скопированном тексте паролей или ключей. Если есть, замажь.

5. Сначала проверь типовые причины.

   • Кеш. Сайт исправлен, а браузер показывает старое. Решение в шаге 2.
   • Неверный путь к файлу. Картинки лежат в images/, а в коде написано Images/ или img/. На компьютере может работать, а на хостинге нет: там важен регистр букв. В консоли это ошибки 404 на файлы.
   • Файл не загрузился. Новое фото есть в папке, но его не добавили в коммит, или при ручной загрузке выбрали не ту папку. Спроси Claude Code: «Все ли файлы, на которые ссылается сайт, есть в последнем коммите?».
   • Ключ в переменных окружения. Если на сайте есть форма или бот (уроки 4.3-4.5), секреты хранятся в переменных окружения, а не в коде. На компьютере они в .env, а на хостинге их нужно внести отдельно в настройках (у Netlify: Project configuration → Environment variables, у Cloudflare Pages: Settings → Variables and Secrets). Забыла внести или ошиблась в названии, и форма молчит. После изменения переменных нужна новая публикация: это прямо сказано в документации Netlify и Cloudflare.
   • Правка задела лишнее. Claude Code поменял общий файл стилей, и съехало всё. Спроси: «Покажи, какие файлы изменились в последнем коммите и что именно».

6. Отдай задачу Claude Code по шаблону. Попроси сначала найти причину и объяснить, потом исправить. Не говори «переделай всё»: так можно сломать то, что работало. Если первая попытка не помогла, не начинай сразу новый чат. Добавь, что изменилось после исправления (урок 4.8).

7. Проверь и закрепи. После исправления: проверка у себя, коммит, публикация (урок 4.10) и короткий чек-лист с живой ссылки (урок 4.13). Попроси Claude Code записать причину и решение в CHANGELOG.md или CLAUDE.md: «Что сломалось, почему, как не повторить». В следующий раз он учтёт это сам.

8. Когда звать специалиста. Claude Code закрывает большинство проблем статического сайта. Зови человека, если:

   • затронуты деньги или данные клиентов: оплата, база, форма с личными данными (урок 4.6);
   • есть подозрение на взлом или утечку ключа: сначала перевыпусти ключ (урок 4.3), потом к специалисту;
   • после двух-трёх попыток Claude Code ходит по кругу и предлагает одно и то же;
   • проблема в домене, DNS или сервере (урок 4.5), а ты не понимаешь, что тебе предлагают нажать. Специалисту отдай то же описание: скриншот, ожидали/получили, консоль, ссылку на репозиторий. Доступы выдавай через приглашение в GitHub или хостинг, а не паролем в мессенджере.

Шаблон

Я [имя], не программист. Объясняй простыми словами.
Сайт: [адрес], хостинг: [Netlify / Cloudflare]. Я уже откатила сайт на рабочую версию.
Что сломалось после последней правки: [какая была правка].
Ожидала: [что должно быть].
Получила: [что видно сейчас].
Устройство и браузер: [например, iPhone, Safari; компьютер, Chrome].
Скриншот: [имя файла в папке проекта].
Ошибки из консоли браузера:
[вставь скопированное, без паролей и ключей]

Порядок:
1. Найди причину. Проверь: пути к файлам и регистр букв, все ли файлы в коммите, переменные окружения, что изменилось в последнем коммите.
2. Объясни причину в двух-трёх предложениях.
3. Предложи минимальное исправление и жди моего «ок». Не трогай то, что работает.
4. После «ок» исправь, скажи, как проверить на живой ссылке, сделай коммит.
5. Запиши причину и решение в CHANGELOG.md.

Источники

• Keyboard shortcuts, developer.chrome.com: открыть DevTools и консоль на Windows/Linux и Mac
• Console features reference, developer.chrome.com: фильтр Log Levels / Errors, Copy console, Save as...
• Environment variables overview, docs.netlify.com: переменные хранятся на Netlify, рекомендация не хранить секреты в репозитории
• Get started with environment variables, docs.netlify.com: Project configuration → Environment variables; изменения действуют только после новой сборки и публикации
• Bindings, developers.cloudflare.com: Settings → Variables and Secrets; после изменения нужна новая публикация
• Common workflows: Work with images, code.claude.com: перетаскивание, Ctrl+V / Alt+V, путь к файлу
• Manage deploys, docs.netlify.com и Rollbacks, developers.cloudflare.com: откат (подробно в уроке 4.10)