Cómo depurar tu app con logs y DevTools

Depurar una app construida con vibe coding en Lovable es menos magia y más trabajo de detective. La clave está en darle contexto específico a la IA, leer los logs correctos y aprender cuándo retroceder en lugar de insistir con prompts a ciegas.

¿Qué es el re-rolling y cuándo deberías usarlo?

Cuando una nueva función rompe lo que ya funcionaba, no intentes arreglarla con más prompts encima. Vuelve atrás.

El concepto de re-rolling viene de un video de Y Combinator y se compara con relanzar los dados en un videojuego: si tu turno salió mal, lo repites con otra estrategia. En Lovable, el historial del chat guarda cada edición, así que puedes restaurar una versión funcional y volver a intentar con un prompt distinto.

¿Qué significa hacer re-rolling en Lovable? Es restaurar tu proyecto a una versión anterior que funcionaba y volver a prompter con otro enfoque, en lugar de seguir acumulando intentos fallidos sobre código roto.

Evita meterte en un rabbit hole. Si algo funcionaba hace tres prompts, regresa a ese punto y replantea cómo pedir el cambio [00:48].

¿Cómo usar el chat mode como tu socio de debugging?

El chat mode es tu mejor aliado cuando algo deja de responder. Pero solo si le das contexto preciso.

Lovable no ve todo automáticamente. Necesita que le señales qué edge function falla, qué log revisar o qué parte del front end inspeccionar. Un prompt útil se ve así:

• "¿Puedes revisar los logs de la edge function para ver si hay errores en la función de renombrar fotos?".
• "¿Puedes analizar la edge function y ver si algo se puede mejorar?".
• "Aquí está el error exacto que aparece en consola, ¿puedes proponer un plan?".

Con ese tipo de instrucciones, el chat mode escanea tus logs, lee tus edge functions y revisa el front end para armar un plan de acción [02:15]. Y siempre puedes editar ese plan antes de ejecutarlo, no estás obligado a aceptar lo que sugiere.

¿Por qué dar contexto importa más que mandar muchos prompts?

Mandar veinte veces "no funciona" no soluciona nada. Lovable responde mejor cuando le entregas el mensaje de error literal, el nombre de la función afectada o el comportamiento esperado vs el real.

¿Cómo leer los logs de Supabase para encontrar el error real?

A veces Lovable falla al leer los logs. Cuando eso pasa, te toca revisar Supabase tú mismo.

Entra al panel de Supabase, busca Edge Functions en el menú lateral, selecciona la función que falla y abre la pestaña de logs. Si no ves nada, revisa el filtro de tiempo: ponlo en las últimas 24 horas para capturar todas las llamadas recientes [03:45].

Supabase marca en azul o verde las ejecuciones exitosas y en rojo las que fallaron. Al abrir un error verás el event message con la causa exacta. En el ejemplo de la clase, un error anterior se resolvió simplemente recargando créditos en la cuenta de OpenAI.

¿Qué hago si Lovable no detecta el error en los logs? Copia el log como JSON desde Supabase, pégalo en el prompt de Lovable y pídele que implemente la corrección con ese contexto exacto.

Esa función de copiar como raw o como JSON es oro: te permite trasladar el error literal sin perder información en el camino.

¿Cómo usar Chrome DevTools cuando el error está en el front end?

No todos los errores viven en el back end. Si tu edge function corre bien pero la app se comporta raro, el problema está en el navegador.

Haz clic derecho en tu app dentro de Chrome y selecciona Inspect para abrir las Developer Tools. Ve a la pestaña Console y verás todos los mensajes que tu app está emitiendo, tanto del client side como del server side [05:20].

Cuando encuentres una línea roja:

1. Copia el mensaje completo del error.
2. Pégalo en el prompt de Lovable.
3. Pídele explícitamente que lo arregle con ese contexto.

Este flujo es especialmente útil cuando Lovable insiste en que "todo se ve bien" pero tú sabes que algo falla. Tú ves lo que la IA no ve.

¿Qué habilidades de debugging deberías practicar?

Depurar bien es una mezcla de paciencia y método. Estas son las prácticas que marcan la diferencia:

• Restaurar versiones anteriores antes de seguir prompteando sobre código roto.
• Leer logs en Supabase filtrando por las últimas 24 horas para no perder llamadas recientes.
• Inspeccionar la consola del navegador con DevTools para detectar fallos del front end.
• Copiar errores literales y pegarlos en Lovable en lugar de describirlos con tus palabras.
• Pedir análisis específicos al chat mode mencionando la función o componente exacto.

El mensaje central es claro: tu rol es hacer el trabajo de detective. Lovable ejecuta, pero tú diriges la investigación. Cuéntame en los comentarios qué tipo de error te ha costado más resolver en tus proyectos.