Ako ladiť aplikáciu vytvorenú s AI: praktický postup

Na ladenie aplikácie vytvorenej s AI najprv chybu zámerne znova vyvolajte, potom zozbierajte dôkazy – presné kroky, chybové hlásenie a to, čo ukazuje konzola prehliadača a karta sieť – a dajte to AI ako „Urobil som X, očakával som Y, dostal som Z“. Ak oprava veci zhorší, vráťte sa k poslednej funkčnej verzii namiesto nabaľovania ďalších opráv. Na to všetko kód čítať nemusíte.

Tento sprievodca pokrýva celý cyklus vrátane rýchleho prehľadu nástrojov pre vývojárov v prehliadači pre ľudí, ktorí nie sú programátori.

Cyklus ladenia

Každá oprava chyby, či ju robí človek alebo AI, nasleduje ten istý cyklus:

1. Zreprodukovať – spoľahlivo vyvolať chybu.
2. Pozorovať – zozbierať chybové hlásenie a to, čo aplikácia práve robila.
3. Opísať – dať AI presné kroky, očakávaný výsledok a skutočný výsledok.
4. Opraviť – nechať AI zmeniť jednu vec.
5. Overiť – zopakovať presné kroky, potvrdiť, že je oprava funkčná, a že nič v okolí sa nepokazilo.
6. V prípade potreby vrátiť späť – ak sa to zhoršilo, vrátiť zmenu a skúsiť znova s lepšími informáciami.

Väčšina času, ktorý sa stratí pri aplikáciách vytvorených s AI, pochádza z preskakovania krokov 1, 2 a 5: poviete „je to rozbité“, prijmete zmenu bez otestovania a potom žiadate ďalšiu opravu na rozbitú opravu.

Krok 1: Zreprodukujte chybu

Chyba, ktorú viete vyvolať na požiadanie, je napoly opravená. Skúste nájsť čo najkratší zoznam krokov, ktorý ju spôsobí.

Spýtajte sa sami seba:

• Deje sa to zakaždým? Ak len niekedy, čo je iné, keď sa to stane – konkrétny záznam, pomalé pripojenie, odhlásenie?
• Deje sa to každému používateľovi? Prihláste sa ako iný účet. Mnohé chyby sa ukážu len novým používateľom bez dát alebo používateľovi s inou rolou.
• Deje sa to na každom zariadení? Vyskúšajte obrazovku širokú ako telefón a iný prehliadač.
• Začala sa po konkrétnej zmene? Ak fungovalo to včera, posledné zmeny sú hlavní podozriví.

Kroky si zapíšte ako krátky očíslovaný zoznam. Neskôr ho vložíte do promptu.

Krok 2: Prečítajte chybové hlásenie

Chybové hlásenia pôsobia zastrašujúco, ale potrebujete len niekoľko častí.

Nemusíte mu rozumieť; musíte ho skopírovať presne. Hlásenie „Cannot read properties of undefined (reading 'name')“ hovorí AI, že kód očakával nejaké dáta (pravdepodobne rezerváciu alebo používateľa), ktoré chýbali. Parafráza ako „nejaká undefined chyba“ tú informáciu stratí.

Niekoľko bežných, zhruba preložených:

• Chyby undefined / null – kód očakával dáta, ktoré neprišli. Často ide o stav načítavania alebo prázdny zoznam, ktorý kód nespracoval.
• 404 Not Found – stránka alebo adresa API neexistuje. Často preklep v ceste alebo odkaz na stránku, ktorá bola premenovaná.
• 401 Unauthorized / 403 Forbidden – požiadavka nebola prihlásená alebo používateľ na to nemá oprávnenie.
• 500 Internal Server Error – serverový kód spadol. Skutočný dôvod je v serverových logoch, nie v prehliadači.
• Chyby CORS – prehliadač zablokoval požiadavku na inú doménu. Zvyčajne ide o konfiguráciu na strane servera.

Krok 3: Použite nástroje pre vývojárov v prehliadači

Každý desktopový prehliadač má vstavané nástroje pre vývojárov („devtools“). Ukazujú, čo stránka robí v pozadí. V Chrome, Edge a Firefoxe kliknite pravým tlačidlom kdekoľvek na stránku a zvoľte Preskúmať (Inspect), alebo stlačte F12 (Cmd+Option+I na Macu). V Safari najprv zapnite ponuku Develop v nastaveniach Safari.

Potrebujete len tri karty.

Konzola

Karta Konzola vypisuje chyby a správy z kódu stránky. Chyby sa zobrazujú červenou farbou. Ak tlačidlo po kliknutí nič nerobí, konzola veľmi často ukáže červenú chybu presne v momente kliknutia. Skopírujte celý text chyby (väčšina prehliadačov ponúkne kopírovanie po kliknutí pravým tlačidlom).

Sieť

Karta Sieť (Network) vypisuje každú požiadavku, ktorú stránka robí – načítanie dát, uloženie formulára, prihlásenie. Otvorte ju a potom zopakujte kroky, ktoré chybu spôsobujú.

• Hľadajte riadky červenou farbou alebo so stavom 400 a vyšším.
• Kliknite na zlyhaný riadok a pozrite jeho Odpoveď (Response). Serverová chyba tam často obsahuje správu, ktorá je užitočnejšia než čokoľvek na obrazovke.
• Zapíšte si URL požiadavky a stavový kód – veta „POST na /api/bookings vrátil 500“ je pre AI veľmi užitočná.

Zaškrtnite Preserve log (Zachovať záznam), ak chyba súvisí s obnovením stránky alebo presmerovaním, aby sa požiadavky nestratili.

Elementy

Karta Elementy (alebo Inšpektor) zobrazuje štruktúru a štýly stránky. Je najužitočnejšia pri chybách rozloženia: keď nad prvkom podržíte kurzor, zvýrazní sa jeho veľkosť a odstupy. Nemusíte tu nič upravovať; stačí povedať „pätička je na mobile široká 2 000 pixelov a posúva stránku do strany“.

Krok 4: Skontrolujte serverové logy

Niektoré chyby sa dejú na serveri, kde ich prehliadač nevidí. Klasickým znakom je chyba 500 v karte sieť. Serverové logy – textový výstup vášho backendu počas behu – zvyčajne obsahujú skutočnú chybu so zásobníkom volaní (zoznam funkcií, ktoré bežali, keď zlyhalo).

Kde ich nájdete, závisí od nástroja. V väčšine nástrojov na tvorbu aplikácií s AI môžete otvoriť terminál alebo zobrazenie logov projektu, alebo jednoducho požiadať AI: „Skontroluj serverové logy za chyby z poslednej požiadavky a povedz mi, čo zlyhalo.“

Krok 5: Opíšte chybu AI

Zozbierané informácie dajte do tohto tvaru:

Na stránke Rezervácie, prihlásený ako člen: kliknul som na Zrušiť pri zajtrajšej 9:00 hodine. Očakávané: rezervácia zmizne a hodina ukáže jedno voľné miesto navyše. Skutočné: na obrazovke sa nič nemení. Konzola zobrazuje TypeError: Cannot read properties of undefined (reading 'id') v BookingCard.tsx:31 a karta sieť ukazuje, že DELETE /api/bookings/123 vrátil 500. Nájdi príčinu, oprav ju a over, že zrušenie funguje pre člena s jednou rezerváciou aj s viacerými.

Prečo je každá časť dôležitá:

• Kde a ako kto zúži problém na jednu obrazovku a jednu rolu.
• Presné kroky umožnia AI chybu zreprodukovať.
• Očakávané vs. skutočné určuje, čo znamená „opravené“.
• Text chyby a zlyhaná požiadavka smerujú priamo na príčinu.
• „Over, že…“ žiada AI o overenie, nielen o úpravu.

Ak AI oprava dvakrát zlyhala, požiadajte ju, aby pred akoukoľvek zmenou vysvetlila:

Zatiaľ nemeň kód. Čo podľa teba túto chybu spôsobuje a aké dôkazy to podporujú?

Zlú teóriu je ľahké odhaliť, keď je napísaná, a oveľa lacnejšie opraviť ako zlú opravu.

Krok 6: Overte a potom skontrolujte okolie

Keď AI povie, že je to opravené, zopakujte presné kroky z kroku 1. Potom skontrolujte veci okolo:

• Rovnaká akcia pre inú rolu používateľa
• Rovnaká akcia bez dát a s veľkým množstvom dát
• Stránky, ktoré zdieľajú komponenty s tou, ktorú ste opravili
• Obrazovka širka telefónu, ak oprava zasiahla rozloženie

Zmeny od AI niekedy opravia jednu cestu a potichu pokazia inú. Dvojminútová kontrola teraz ušetrí zmätený hodinový problém neskôr.

Krok 7: Vráťte sa späť namiesto nabaľovania

Ak oprava veci zhoršila alebo ste prešli tri kolá bez pokroku, vráťte sa. Návrat k poslednej funkčnej verzii a preformulovanie s lepšími dôkazmi takmer vždy porazí žiadosť o štvrtú opravu na tri nesprávne. Každý neúspešný pokus zanechá kód, ktorý zmätie ďalší pokus.

Dobré návyky, ktoré návrat uľahčujú:

• Testujte po každej zmene, aby ste vedeli, ktorá zmena čo rozbila.
• Držte zmeny malé – jedna funkcia alebo oprava v jednej správe.
• Zapíšte si poslednú funkčnú verziu pred niečím rizikovým.
• Ak je kód v Gite, commitujte funkčné verzie, aby ste sa k nim mohli vrátiť.

Bežné vzory chýb v aplikáciách vytvorených s AI

Keď problém nie je chyba

Niektoré „chyby“ sú AI, ktorá buduje presne to, čo dostala v zadaní, a opis bol nejednoznačný. Ak je oprava, ktorú žiadate, v skutočnosti zmena správania, povedzte to jasne: „Zmeň to tak, aby…“. Ak si nie ste istí, aké správanie je vlastne správne, rozhodnite to najprv. Náš sprievodca písaním promptov pre nástroje na tvorbu aplikácií s AI ukazuje, ako jasne špecifikovať pravidlá. A ak pripravujete aplikáciu pre skutočných používateľov, ako dostať AI prototyp do produkcie pokrýva kontroly pred spustením.

Ladenie v Mythex

Mythex má nástroje pre každý krok cyklu:

• Náhľad na reprodukciu chyby vrátane rámca veľkosti telefónu.
• /test – agent prejde vašu živú náhľadovú verziu ako používateľ a nahlási rozbité postupy.
• /fix nasmeruje agenta priamo na konkrétne poškodenie.
• Režim plánu (Plan) umožní agentovi skúmať a vysvetliť veci skôr, než niečo upraví.
• Kód → terminál zobrazí serverové logy vašej aplikácie.
• Vrátiť sa do tohto bodu pri ľubovoľnej odpovedi vráti projekt k danému kontrolnému bodu.

Ak publikovanie zlyhá, dialóg publikovania zvyčajne ponúkne Opraviť s AI, ktoré prečíta výstup zostavenia alebo logy aplikácie. Pozrite Ladenie vašej aplikácie a Riešenie problémov s publikovaním v dokumentácii.

Otázky