Com depurar una app creada amb IA: un mètode pràctic

Per depurar una app construïda amb IA, primer fes que l'error torni a passar a propòsit, després recull les proves —els passos exactes, el missatge d'error i el que mostren la consola i la pestanya de xarxa del navegador— i dona-ho a la IA com «he fet X, esperava Y, he obtingut Z». Si una correcció empitjora les coses, torna a la darrera versió que funcionava en lloc d'acumular més correccions a sobre. No cal que llegeixis el codi per fer-ho bé.

Aquesta guia cobreix tot el cicle, incloent un recorregut ràpid per les eines de desenvolupador del navegador per a persones que no són programadores.

El cicle de depuració

Cada correcció d'un error, la faci una persona o una IA, segueix el mateix cicle:

1. Reproduir — fer que l'error passi de manera fiable.
2. Observar — recollir el missatge d'error i què estava fent l'app.
3. Descriure — donar a la IA els passos precisos, el resultat esperat i el resultat real.
4. Corregir — deixar que la IA canviï una sola cosa.
5. Verificar — repetir els passos exactes i confirmar que està arreglat i que res de proper no s'ha trencat.
6. Fer marxa enrere si cal — si ha empitjorat, desfer-ho i tornar a intentar-ho amb millor informació.

La major part del temps malgastat en apps construïdes amb IA ve de saltar-se els passos 1, 2 i 5: dir «està trencat», acceptar un canvi sense provar-lo i després demanar una altra correcció a sobre d'una de trencada.

Pas 1: Reprodueix l'error

Un error que pots provocar quan vulguis ja està mig arreglat. Intenta trobar el conjunt de passos més curt que el provoca.

Pregunta't:

• Passa sempre? Si només passa a vegades, què és diferent quan passa —un registre concret, una connexió lenta, haver tancat la sessió?
• Passa per a tots els usuaris? Inicia sessió amb un altre compte. Molts errors només apareixen per a usuaris nous sense dades, o per a un usuari amb un rol diferent.
• Passa en tots els dispositius? Prova una pantalla d'amplada de mòbil i un altre navegador.
• Va començar després d'un canvi concret? Si funcionava ahir, els últims canvis són els principals sospitosos.

Escriu els passos en una llista numerada curta. La enganxaràs al prompt més endavant.

Pas 2: Llegeix el missatge d'error

Els missatges d'error semblen intimidants, però només necessites algunes parts.

No cal que l'entenguis; cal que el copiïs exactament. «Cannot read properties of undefined (reading 'name')» diu a la IA que el codi esperava unes dades (probablement una reserva o un usuari) que no hi eren. Una paràfrasi com «un error undefined» perd aquesta informació.

Alguns d'habituals, traduïts aproximadament:

• Errors undefined / null — el codi esperava unes dades que no han arribat. Sovint és un estat de càrrega o una llista buida que el codi no gestiona.
• 404 Not Found — la pàgina o l'adreça de l'API no existeix. Sovint és un error tipogràfic en una ruta o un enllaç a una pàgina que s'ha reanomenat.
• 401 Unauthorized / 403 Forbidden — la petició no tenia sessió iniciada, o l'usuari no té permís per fer-ho.
• 500 Internal Server Error — el codi del servidor ha fallat. La causa real és als registres del servidor, no al navegador.
• Errors CORS — el navegador ha bloquejat una petició a un domini diferent. Normalment és un problema de configuració al servidor.

Pas 3: Usa les eines de desenvolupador del navegador

Tots els navegadors d'escriptori tenen eines de desenvolupador integrades («devtools»). Mostren què fa la pàgina entre bastidors. A Chrome, Edge i Firefox, fes clic dret en qualsevol lloc de la pàgina i tria Inspecciona, o prem F12 (Cmd+Opció+I en un Mac). A Safari, activa primer el menú Desenvolupament a la configuració de Safari.

Només necessites tres pestanyes.

Consola

La pestanya Consola llista els errors i els missatges del codi de la pàgina. Els errors es mostren en vermell. Si un botó no fa res quan hi fas clic, la consola sovint mostrarà un error vermell just en el moment del clic. Copia el text complet de l'error (fes clic dret sobre ell per veure l'opció de copiar en la majoria de navegadors).

Xarxa

La pestanya Xarxa llista cada petició que fa la pàgina —carregar dades, desar un formulari, iniciar sessió. Obre-la i repeteix els passos que provoquen l'error.

• Busca files en vermell o amb un estat de 400 o superior.
• Fes clic en una fila fallida per veure la seva Resposta. Un error del servidor sovint inclou allà un missatge més útil que res del que hi ha a la pantalla.
• Anota la URL de la petició i el codi d'estat —«el POST a /api/bookings ha retornat 500» és una frase molt útil per donar a la IA.

Marca Conserva el registre si l'error implica una recàrrega de pàgina o una redirecció, perquè les peticions no desapareguin.

Elements

La pestanya Elements (o Inspector) mostra l'estructura i els estils de la pàgina. És més útil per als errors de maquetació: passa el cursor sobre un element per veure'n la mida i l'espaiat ressaltats. No cal que editis res aquí; n'hi ha prou amb dir «el peu de pàgina fa 2.000 píxels d'amplada en mòbil i empeny la pàgina cap als costats».

Pas 4: Revisa els registres del servidor

Alguns errors passen al servidor, on el navegador no els pot veure. Un error 500 a la pestanya de xarxa n'és el senyal clàssic. Els registres del servidor —la sortida de text del teu backend mentre s'executa— solen contenir l'error real amb una traça de pila (una llista de les funcions que s'estaven executant quan ha fallat).

On els trobes depèn de la teva eina. A la majoria de creadors d'apps amb IA pots obrir un terminal o una vista de registres del projecte, o simplement demanar a la IA: «Revisa els registres del servidor per trobar errors de l'última petició i digues-me què ha fallat».

Pas 5: Descriu l'error a la IA

Posa el que has recollit en aquesta forma:

A la pàgina de Reserves, connectat com a membre: he fet clic a Cancel·la a la classe de demà a les 9:00. Esperava: la reserva desapareix i la classe mostra una plaça lliure més. Real: a la pantalla no canvia res. La consola mostra TypeError: Cannot read properties of undefined (reading 'id') a BookingCard.tsx:31, i la pestanya de xarxa mostra que DELETE /api/bookings/123 ha retornat 500. Troba la causa, corregeix-la i comprova que cancel·lar funciona per a un membre amb una reserva i per a un amb diverses.

Per què importa cada part:

• On i com a qui redueix el problema a una pantalla i un rol.
• Els passos exactes permeten que la IA el reprodueixi.
• Esperat vs real defineix què vol dir «arreglat».
• El text de l'error i la petició fallida apunten directament a la causa.
• «Comprova que…» demana a la IA que verifiqui, no només que editi.

Si la IA ha intentat una correcció dues vegades i no ha funcionat, demana-li que expliqui abans de canviar res:

No canviïs el codi encara. Què creus que causa això, i quina evidència ho sustenta?

Una teoria equivocada és fàcil de detectar quan s'escriu, i és molt més barat de corregir que una correcció equivocada.

Pas 6: Verifica i després revisa el que hi ha al costat

Quan la IA digui que està arreglat, repeteix els passos exactes del Pas 1. Després revisa les coses del voltant:

• La mateixa acció per a un altre rol d'usuari
• La mateixa acció sense dades i amb moltes dades
• Les pàgines que comparteixen components amb la que has arreglat
• Una pantalla d'amplada de mòbil, si la correcció afectava la maquetació

Els canvis de la IA de vegades arreglen un camí i en trenquen un altre sense fer soroll. Una comprovació de dos minuts ara t'estalvia una hora confusa després.

Pas 7: Torna enrere en lloc d'acumular

Si una correcció ha empitjorat les coses, o si has fet tres rondes sense progrés, torna enrere. Tornar a l'última versió que funcionava i reformular amb millor evidència gairebé sempre és millor que demanar una quarta correcció a sobre de tres d'errònies. Cada intent fallit deixa codi enrere, i aquest codi confon el següent intent.

Bons hàbits que fan fàcil tornar enrere:

• Prova després de cada canvi, així saps quin canvi ha trencat les coses.
• Mantén els canvis petits —una funció o correcció per missatge.
• Anota l'última versió bona abans de començar alguna cosa arriscada.
• Si el codi és a Git, fes commit de les versions que funcionen perquè hi puguis tornar.

Patrons d'errors habituals en apps construïdes amb IA

Quan el problema no és un error

Alguns «errors» són la IA construint exactament el que se li va demanar, i la descripció era ambigua. Si la correcció que demanes és realment un canvi de comportament, digues-ho clarament: «Canvia-ho perquè…». Si no tens clar quin és el comportament correcte, decideix-ho primer. La nostra guia sobre com escriure prompts per a creadors d'apps amb IA explica com especificar regles amb claredat. I si estàs preparant una app per a usuaris reals, portar un prototip d'IA a producció cobreix les comprovacions que val la pena fer abans del llançament.

Depurar a Mythex

Mythex té eines per a cada pas del cicle:

• Vista prèvia per reproduir l'error, inclòs un marc de mida de mòbil.
• /test fa que l'agent cliqui per la vista prèvia en directe com un usuari i informi dels fluxos trencats.
• /fix dirigeix l'agent específicament als trencaments.
• El mode Pla permet que l'agent investigui i expliqui abans de editar res.
• Codi → terminal mostra els registres del servidor de la teva app.
• Torna a aquest punt en qualsevol resposta reverteix el projecte a aquell punt de control.

Si una publicació falla, el diàleg de publicació normalment ofereix Arregla amb IA, que llegeix la sortida de la compilació o els registres de l'app. Consulta Depura la teva app i Resolució de problemes de publicació a la documentació.

Preguntes