Contenido del curso
Cómo leer logs para depurar en Lovable
Depurar una app construida con Lovable no siempre requiere pedirle a la IA que adivine el problema. A veces conviene leer los logs tú mismo, identificar el error y darle a Lovable el contexto exacto para resolverlo. Aquí te muestro cómo hacerlo paso a paso usando un bug real en una edge function.
¿Cómo identificar un error desde la consola del navegador?
Cuando algo falla en la interfaz, el primer lugar para mirar es la consola de Chrome. Es tu radar de errores front-end.
Haz clic derecho en cualquier parte de la app y selecciona inspeccionar. Luego abre la pestaña Console. Si tienes muchos mensajes mezclados, despliega el filtro y deja activo solo errors para ver lo importante.
En el caso del bug que estamos revisando, al hacer clic en el botón de análisis con IA aparece un status 500 en la edge function llamada AI photo rename [01:00]. Esa es tu primera pista.
¿Qué hago con el error de la consola? Haz clic derecho sobre el mensaje, selecciona copy console, pégalo en Lovable y describe en qué función ocurre. Eso le da contexto preciso para diagnosticar.
¿Cómo leer los logs de una edge function en Supabase?
Cuando el error viene del backend, Lovable a veces puede leer los logs por su cuenta, pero ir directo a Supabase suele ser más útil.
Entra a tu proyecto de Supabase y en el menú lateral ve a edge functions. Busca la función que está fallando, en este caso AI photo rename, y abre su sección de logs [01:45].
Ahí apareció el mensaje missing required environment variables, que normalmente significa que un secret no se está leyendo correctamente. Copié ese log y se lo pasé a Lovable explicando exactamente dónde ocurría.
¿Por qué importa darle el log directo a Lovable?
Porque reduce la adivinanza. En vez de describir el síntoma, le entregas la causa probable. Lovable pasa de improvisar a trabajar sobre evidencia concreta.
¿Qué hago si el secret existe pero no se carga?
Aquí viene lo interesante. Después de pegar el log, Lovable agregó logging extra para identificar cuál variable de entorno fallaba [02:30]. Este es un truco poderoso: si no entiendes por qué algo se rompe, pídele a Lovable que añada más logs de depuración para ver qué pasa por dentro.
Al reintentar la acción y refrescar los logs, el problema concreto era la carga de la OpenAI API key. Lo curioso es que el secret ya estaba configurado en el vault de Supabase.
¿Por qué un secret configurado puede no cargar? Suele deberse a problemas de caching o a que la edge function no se redeployó tras actualizar la variable. Forzar un redeploy normalmente lo soluciona.
En ese punto activé el chat mode de Lovable para que escaneara el código base completo y buscara la causa. Le expliqué que el secret ya existía. Lovable sugirió que podía ser un tema de caché o que la función no estaba subida. Implementé el plan, redesplegó la edge function y al volver a hacer clic en analizar foto, la app renombró correctamente la imagen como Columbia Tech Fest panel [04:15].
¿Qué técnicas conviene tener siempre a la mano para depurar?
Depurar bien es cuestión de tener un flujo claro. Estas son las herramientas que uso una y otra vez.
Después de aplicar estos pasos, casi cualquier bug se vuelve manejable. La clave está en alimentar a la IA con evidencia, no con suposiciones.
¿Cuándo usar chat mode y cuándo edit mode?
Usa edit mode cuando ya sabes qué archivo o función tocar y quieres un cambio directo. Usa chat mode cuando necesitas que Lovable analice el código base completo, revise logs y proponga hipótesis antes de modificar nada.
Esa diferencia te ahorra ediciones innecesarias y te ayuda a entender el flujo real de tu aplicación. Cuéntame en los comentarios qué errores te has encontrado y cómo los resolviste leyendo logs.
Fredy Pico
EstudianteIt’s better to check the logs in Supabase.
Follow me:
