Oleksii Siniaiev
Contratar
Navegación de la página del artículo
Artículos 1 min de lectura

Depuración de un sitio en producción tras despliegue con IA — lo que ve el navegador vs lo que desplegaste

Tras desplegar un portfolio construido con IA, encontré menús rotos y contenido desbordado — por optimización CSS del servidor. Cómo un agente de IA lo arregló todo en una sesión.

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

Despliegas el sitio. Todo perfecto en el portátil. En el móvil — menú roto, badges como viñetas, contenido desbordado.

Bug 1: Navegación de escritorio en móvil

El servidor entregaba CSS diferente — 38,886 bytes en lugar de 53,378. UCSS de LiteSpeed eliminaba reglas.

Bug 2: Skills como viñetas

Solo 250 de 311 reglas CSS cargadas. Secciones del portfolio eliminadas.

Bug 3: Contenido desbordando

Gutenberg inyectaba width inline. Solución: overflow: hidden, width: 100% !important.

Bug 4: Contraste WCAG

Colores corregidos para cumplir WCAG AA.

Conclusión

El bug más sorprendente — el hosting corrompía el CSS. Siempre verifica que el navegador recibe lo que desplegaste.

Compartir este artículo

LinkedIn X Email

Contacto

¿Trabajas en algo parecido? Hablemos.

Estoy abierto a hablar de arquitectura, Laravel, WordPress, rendimiento y problemas prácticos de implementación.

Cómo puedo ayudarte Enviar un mensaje

Explorar más

Artículos

Cómo saber que tu agente de IA perdió el contexto: un state-canary en AGENTS.md y CLAUDE.md

Un state-canary es un patrón de observabilidad simple para AI coding agents: una línea…
Artículos

Parte 3. Un mes con un diario de IA: cómo encontrar patrones entre sueño, estrés y entrenamientos

Cómo analizar un diario de IA tras el primer mes: correcciones de transcripción, reflexión…
Artículos

Parte 2. Hermes Agent + DeepSeek en Ubuntu: guía completa de un diario con IA en Telegram

Guía paso a paso: Hermes Agent y DeepSeek en Ubuntu, bot privado de Telegram,…