Алексей Синяев
Нанять
Навигация по странице статьи
Статьи 1 мин чтения

Отладка продакшен-сайта после ИИ-деплоя — что видит браузер vs что вы задеплоили

После деплоя портфолио-сайта, построенного с ИИ, обнаружились сломанное мобильное меню и вылезающий контент — из-за серверной оптимизации CSS. Как ИИ-агент диагностировал и исправил всё за одну сессию.

Дебаг продакшен-CSS: порівняння байтів таблиці стилів, яку завантажує браузер, із задеплоєним вихідником
Содержание

Вы деплоите сайт. На ноутбуке всё отлично. Открываете на телефоне — мобильное меню сломано, скиллы-бейджи показываются буллетами, контент вылезает за экран.

Баг 1: Десктопная навигация на мобайле

CSS-файл имел mobile-first подход, но сервер отдавал другой CSS — 38,886 байт вместо 53,378. UCSS-оптимизация LiteSpeed вырезала «неиспользуемые» правила.

Баг 2: Скиллы как буллеты

Браузер загружал только 250 из 311 CSS-правил. Секции портфолио были вырезаны LiteSpeed.

Баг 3: Контент вылезает за экран

Gutenberg добавлял inline width: 720px. Решение: overflow: hidden, width: 100% !important, max-width: min(72ch, 100%).

Баг 4: Контрастность WCAG

Заменили opacity на сплошной цвет #5f6673 (5.13:1), затемнили акцент до #ad5528.

Вывод

Самый неожиданный баг — хостинг портил CSS. Всегда проверяйте, что браузер получает то же, что вы задеплоили.

Поделиться статьей

LinkedIn X Email

Связаться

Работаете над похожей задачей? Давайте обсудим.

Открыт к обсуждению архитектуры, Laravel, WordPress, производительности и практических инженерных задач.

Чем я могу помочь Связаться

Смотрите также

Статьи

Как понять, что AI-агент потерял контекст: state-canary в AGENTS.md и CLAUDE.md

State-canary — простой observability-паттерн для AI coding agents: одна строка состояния в каждом ответе…
Статьи

Часть 3. Месяц с AI-дневником: как искать связи между сном, стрессом и тренировками

Как анализировать AI-дневник после первого месяца: исправление распознавания, честная рефлексия с источниками, Obsidian, стоимость…
Статьи

Часть 2. Hermes Agent + DeepSeek на Ubuntu: полный мануал AI-дневника в Telegram

Пошаговый мануал: Hermes Agent и DeepSeek на Ubuntu, Telegram-бот с закрытым доступом, локальный faster-whisper,…