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

Para depurar una app creada con IA, primero haz que el error vuelva a ocurrir a propósito y después 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 en la forma « hice X, esperaba Y, obtuve Z ». Si un arreglo empeora las cosas, vuelve a la última versión que funcionaba en lugar de apilar más arreglos encima. No hace falta leer el código para hacer bien todo esto.

Esta guía cubre el ciclo completo, incluido un recorrido rápido por las herramientas de desarrollo del navegador para quien no es programador.

El ciclo de depuración

Cada corrección de un error, lo haga una persona o una IA, sigue el mismo ciclo:

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 y prueba de nuevo con mejor información.

La mayor parte del tiempo perdido con 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 estaba mal.

Paso 1: Reproducir el error

Un error que puedes provocar cuando quieras está medio arreglado. Intenta encontrar el conjunto de pasos más corto que lo causa.

Pregúntate:

• ¿Ocurre siempre? Si solo a veces, ¿qué es diferente cuando ocurre: un registro concreto, una conexión lenta, haber cerrado sesión?
• ¿Ocurre para todos los usuarios? Entra 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.

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

Paso 2: Leer el mensaje de error

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

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

Algunos comunes, traducidos de forma aproximada:

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

Paso 3: Usar las herramientas de desarrollo del navegador

Todos los navegadores de escritorio tienen herramientas de desarrollo integradas (« devtools »). Muestran lo que hace la página entre bastidores. 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 antes el menú Desarrollo en los ajustes de Safari.

Basta con tres pestañas.

Consola

La pestaña Consola muestra los 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 rojo en el momento del clic. Copia el texto completo del error (en la mayoría de navegadores, haz clic derecho sobre él para ver la opción de copiar).

Red

La pestaña Red (Network) muestra cada petición 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 suele incluir ahí un mensaje más útil que cualquier cosa en pantalla.
• Anota la URL de la petición y el código de estado: « el POST a /api/bookings devolvió 500 » es una frase muy útil para dársela 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 peticiones 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 diseño: pasa el ratón sobre un elemento para ver su tamaño y espaciado resaltados. No necesitas editar nada aquí; basta con decir « el pie tiene 2.000 píxeles de ancho en móvil y empuja la página hacia un lado ».

Paso 4: Revisar 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 un rastro de la pila (una lista de las funciones que estaban ejecutándose cuando falló).

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

Paso 5: Describir el error a la IA

Pon lo que has reunido en 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: no cambia nada en pantalla. 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 pantalla y el rol.
• Los pasos exactos permiten a la IA reproducirlo.
• Lo esperado frente a lo real define qué significa « arreglado ».
• El texto del error y la petición fallida apuntan directamente a la causa.
• « Comprueba que… » pide a la IA que verifique, no solo que edite.

Si la IA ya ha intentado arreglarlo dos veces sin éxito, pídele que 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 equivocada es fácil de detectar cuando se escribe, y mucho más barata de corregir que un arreglo equivocado.

Paso 6: Verificar y revisar lo cercano

Cuando la IA diga que está arreglado, repite los pasos exactos del Paso 1. Después revisa lo que hay alrededor:

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

Los cambios de la IA a veces arreglan un camino y rompen otro en silencio. Dos minutos de comprobación ahora ahorran una hora confusa más tarde.

Paso 7: Volver 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 la petición con mejores pruebas casi siempre gana a pedir un cuarto arreglo sobre tres equivocados. Cada intento fallido deja código atrás, y ese código confunde al siguiente intento.

Buenos hábitos que facilitan volver atrás:

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

Patrones de error comunes 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 tienes claro 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 las 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 conviene hacer antes del lanzamiento.

Depurar en Mythex

Mythex tiene herramientas para cada paso del ciclo:

• 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 directo como un usuario y reporte los flujos rotos.
• /fix dirige al agente hacia las roturas concretas.
• Modo Plan permite que el agente investigue y 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 al punto de control de ese momento.

Si una publicación falla, el cuadro de diálogo de publicación suele ofrecer 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