Cómo depurar una app creada con IA: un método práctico

Para depurar una app creada con IA, primero provoca el error de nuevo a propósito, luego reúne pruebas (los pasos exactos, el mensaje de error y lo que muestran la consola y la pestaña de red del navegador) y dáselo a la IA como «hice X, esperaba Y, obtuve Z». Si un arreglo empeora las cosas, vuelve a la última versión que funcionaba en lugar de apilar arreglos encima. No necesitas leer el código para hacer bien todo esto.

Esta guía cubre todo el bucle, incluido un recorrido rápido por las herramientas para desarrolladores del navegador para quienes no son programadores.

El bucle de depuración

Todo arreglo de un error, lo haga una persona o una IA, sigue el mismo bucle:

1. Reproducir: haz que el error ocurra de forma fiable.
2. Observar: recoge el mensaje de error y lo que estaba haciendo la app.
3. Describir: dale a la IA pasos precisos, el resultado esperado y el resultado real.
4. Arreglar: deja que la IA cambie una sola cosa.
5. Verificar: repite los pasos exactos y confirma que está arreglado y que nada cercano se ha roto.
6. Volver atrás si hace falta: si empeoró, deshaz el cambio e inténtalo de nuevo con mejor información.

Gran parte del tiempo perdido en apps creadas con IA viene de saltarse los pasos 1, 2 y 5: decir «está roto», aceptar un cambio sin probarlo y pedir otro arreglo encima de uno que ya está roto.

Paso 1: reproduce el error

Un error que puedes provocar cuando quieras está medio arreglado. Intenta encontrar la secuencia de pasos más corta que lo causa.

Pregúntate:

• ¿Ocurre siempre? Si solo a veces, ¿qué es distinto cuando ocurre? ¿Un registro concreto, una conexión lenta, haber cerrado sesión?
• ¿Ocurre para todos los usuarios? Inicia sesión con otra cuenta. Muchos errores solo aparecen para usuarios nuevos sin datos, o para un usuario con otro rol.
• ¿Ocurre en todos los dispositivos? Prueba una pantalla del ancho de un móvil y otro navegador.
• ¿Empezó tras un cambio concreto? Si funcionaba ayer, los últimos cambios son los principales sospechosos.

Apunta los pasos en una lista numerada corta. La pegarás en el prompt más adelante.

Paso 2: lee el mensaje de error

Los mensajes de error intimidan, pero solo necesitas unas pocas partes.

No necesitas entenderlo; necesitas copiarlo exactamente. «Cannot read properties of undefined (reading 'name')» le dice a la IA que el código esperaba algún dato (probablemente una reserva o un usuario) que no estaba. Una paráfrasis como «un error de undefined» pierde esa información.

Algunos comunes, traducidos a grandes rasgos:

• Errores de undefined / null: el código esperaba datos que no llegaron. A menudo, un estado de carga o una lista vacía que el código no gestionaba.
• 404 Not Found: la página o la dirección de la API no existe. A menudo es una errata en una ruta o un enlace a una página que se renombró.
• 401 Unauthorized / 403 Forbidden: la solicitud no tenía sesión iniciada, o el usuario no tiene permiso para hacer eso.
• 500 Internal Server Error: el código del servidor se cayó. La razón real está en los registros del servidor, no en el navegador.
• Errores de CORS: el navegador bloqueó una solicitud a otro dominio. Normalmente es un problema de configuración en el servidor.

Paso 3: usa las herramientas para desarrolladores del navegador

Todos los navegadores de escritorio tienen herramientas de desarrollo integradas («devtools»). Muestran lo que hace la página por dentro. En Chrome, Edge y Firefox, haz clic derecho en cualquier parte de la página y elige Inspeccionar, o pulsa F12 (Cmd+Opción+I en un Mac). En Safari, activa primero el menú Desarrollo en los ajustes de Safari.

Solo necesitas tres pestañas.

Consola

La pestaña Consola muestra errores y mensajes del código de la página. Los errores aparecen en rojo. Si un botón no hace nada al pulsarlo, la consola muy a menudo mostrará un error en rojo justo en el momento del clic. Copia el texto completo del error (haz clic derecho sobre él para la opción de copiar en la mayoría de navegadores).

Red

La pestaña Red (Network) lista todas las solicitudes que hace la página: cargar datos, guardar un formulario, iniciar sesión. Ábrela y repite los pasos que provocan el error.

• Busca filas en rojo o con un estado de 400 o superior.
• Haz clic en una fila fallida para ver su Respuesta. Un error del servidor a menudo incluye ahí un mensaje más útil que cualquier cosa en pantalla.
• Anota la URL de la solicitud y el código de estado: «el POST a /api/bookings devolvió 500» es una frase muy útil para darle a la IA.

Marca Conservar registro (Preserve log) si el error implica una recarga o una redirección de la página, para que las solicitudes no desaparezcan.

Elementos

La pestaña Elementos (o Inspector) muestra la estructura y los estilos de la página. Es lo más útil para errores de maquetación: pasa el ratón sobre un elemento para ver su tamaño y su espaciado resaltados. No necesitas editar nada aquí; basta con decir «el pie de página mide 2.000 píxeles de ancho en móvil y empuja la página hacia un lado».

Paso 4: revisa los registros del servidor

Algunos errores ocurren en el servidor, donde el navegador no los ve. Un error 500 en la pestaña de red es la señal clásica. Los registros del servidor (la salida de texto de tu backend mientras se ejecuta) suelen contener el error real con una traza de pila (una lista de las funciones que se estaban ejecutando cuando falló).

Dónde encontrarlos depende de tu herramienta. En la mayoría de los creadores de apps con IA puedes abrir una terminal o una vista de registros del proyecto, o simplemente pedírselo a la IA: «Revisa los registros del servidor en busca de errores de la última solicitud y dime qué falló».

Paso 5: describe el error a la IA

Dale lo que has reunido con esta forma:

En la página de Reservas, con sesión iniciada como miembro: pulsé Cancelar en la clase de mañana a las 9:00. Esperaba: la reserva desaparece y la clase muestra una plaza libre más. Real: en pantalla no cambia nada. La consola muestra TypeError: Cannot read properties of undefined (reading 'id') en BookingCard.tsx:31, y la pestaña de red muestra que DELETE /api/bookings/123 devolvió 500. Encuentra la causa, arréglala y comprueba que cancelar funciona para un miembro con una reserva y para uno con varias.

Por qué importa cada parte:

• Dónde y con qué usuario acota la búsqueda a una pantalla y un rol.
• Los pasos exactos permiten a la IA reproducirlo.
• Esperado frente a real define qué significa «arreglado».
• El texto del error y la solicitud fallida apuntan directamente a la causa.
• «Comprueba que…» le pide a la IA que verifique, no solo que edite.

Si la IA ha intentado arreglarlo dos veces sin éxito, pídele que lo explique antes de cambiar nada:

No cambies el código todavía. ¿Qué crees que causa esto, y qué pruebas lo respaldan?

Una teoría errónea es fácil de detectar cuando se escribe, y mucho más barata de corregir que un arreglo equivocado.

Paso 6: verifica y revisa lo cercano

Cuando la IA diga que está arreglado, repite los pasos exactos del paso 1. Luego revisa lo que está alrededor:

• La misma acción para otro rol de usuario
• La misma acción sin datos y con muchos datos
• Páginas que comparten componentes con la que arreglaste
• Una pantalla del ancho de un móvil, si el arreglo tocó la maquetación

Los cambios de la IA a veces arreglan un camino y rompen otro en silencio. Una comprobación de dos minutos ahora ahorra una hora de confusión después.

Paso 7: vuelve atrás en lugar de acumular

Si un arreglo empeoró las cosas, o llevas tres rondas sin avanzar, vuelve atrás. Regresar a la última versión que funcionaba y replantear el problema con mejores pruebas casi siempre gana a pedir un cuarto arreglo encima de tres errados. Cada intento fallido deja código, y ese código confunde al siguiente intento.

Buenos hábitos que facilitan volver atrás:

• Prueba después de cada cambio, así sabes qué cambio rompió algo.
• Mantén los cambios pequeños: una funcionalidad o un arreglo por mensaje.
• Anota la última versión buena antes de empezar algo arriesgado.
• Si el código está en Git, confirma las versiones que funcionan para poder volver a ellas.

Patrones de error habituales en apps creadas con IA

Cuando el problema no es un error

Algunos «errores» son la IA construyendo exactamente lo que se le pidió, y la descripción era ambigua. Si el arreglo que pides es en realidad un cambio de comportamiento, dilo claramente: «Cámbialo para que…». Si no estás seguro de cuál es el comportamiento correcto, decídelo primero. Nuestra guía sobre cómo escribir prompts para creadores de apps con IA explica cómo especificar reglas con claridad. Y si estás preparando una app para usuarios reales, cómo llevar un prototipo de IA a producción recoge las comprobaciones que merece la pena hacer antes del lanzamiento.

Depurar en Mythex

Mythex tiene herramientas para cada paso del bucle:

• Vista previa para reproducir el error, incluido un marco del tamaño de un móvil.
• /test hace que el agente recorra tu vista previa en vivo como un usuario y te informe de los flujos rotos.
• /fix dirige al agente específicamente a las roturas.
• El modo Plan permite que el agente investigue y lo explique antes de editar nada.
• Código → terminal muestra los registros del servidor de tu app.
• Volver a este punto en cualquier respuesta devuelve el proyecto a ese punto de control.

Si una publicación falla, el cuadro de diálogo de publicación normalmente ofrece Arreglar con IA, que lee la salida de la compilación o los registros de la app. Consulta Depura tu app y Solución de problemas de publicación en la documentación.

Preguntas