Jak ladit aplikaci postavenou AI: praktická metoda

Aplikaci postavenou s AI ladíte tak, že chybu nejdřív záměrně znovu vyvoláte, pak sesbíráte důkazy: přesné kroky, chybovou hlášku a to, co ukazuje konzole prohlížeče a záložka sítě. To pošlete AI ve tvaru „udělal jsem X, očekával jsem Y, dostal jsem Z“. Pokud oprava věci zhorší, vraťte se k poslednímu funkčnímu stavu, místo abyste na něj nabalovali další opravy. Abyste to zvládli dobře, nemusíte kód číst.

Tento průvodce pokrývá celý cyklus včetně rychlé prohlídky vývojářských nástrojů prohlížeče pro nevývojáře.

Cyklus ladění

Každá oprava chyby, ať ji dělá člověk nebo AI, se řídí stejným cyklem:

1. Reprodukovat — spolehlivě vyvolat chybu.
2. Pozorovat — získat chybovou hlášku a to, co aplikace dělala.
3. Popsat — dát AI přesné kroky, očekávaný a skutečný výsledek.
4. Opravit — nechat AI změnit jednu věc.
5. Ověřit — zopakovat přesně tytéž kroky a potvrdit, že je oprava hotová a že se nerozbilo nic vedle.
6. Vrátit se zpět, pokud je to třeba — pokud to dopadlo hůř, vraťte změnu a zkuste to znovu s lepšími informacemi.

Většina času ztraceného u aplikací postavených s AI pochází z přeskakování kroků 1, 2 a 5: říct „je to rozbité“, přijmout změnu bez otestování a pak žádat další opravu nad rozbitou.

Krok 1: Reprodukujte chybu

Chyba, kterou spustíte na přání, je z poloviny opravená. Zkuste najít co nejkratší sadu kroků, která ji vyvolá.

Zeptejte se sami sebe:

• Stává se to pokaždé? Pokud jen někdy, co se liší, když k ní dojde: konkrétní záznam, pomalé připojení, odhlášení?
• Stává se to všem uživatelům? Přihlaste se jiným účtem. Mnoho chyb se projeví jen novým uživatelům bez dat nebo uživatelům s jinou rolí.
• Stává se to na všech zařízeních? Zkuste obrazovku v šířce telefonu a jiný prohlížeč.
• Začalo to po konkrétní změně? Pokud fungovalo včera, jsou poslední změny hlavními podezřelými.

Kroky si zapište jako krátký číslovaný seznam. Později ho vložíte do zadání.

Krok 2: Přečtěte chybovou hlášku

Chybové hlášky vypadají zastrašujícně, ale potřebujete jen několik jejich částí.

Nemusíte jí rozumět; musíte ji zkopírovat přesně. „Cannot read properties of undefined (reading 'name')“ říká AI, že kód očekával data (pravděpodobně rezervaci nebo uživatele), která nedorazila. Parafráze jako „nějaká chyba undefined“ tuhle informaci ztratí.

Některé běžné chyby, volně přeložené:

• Chyby undefined / null — kód očekával data, která nedorazila. Často stav načítání nebo prázdný seznam, který kód neošetřil.
• 404 Not Found — stránka nebo adresa API neexistuje. Často překlep v cestě nebo odkaz na stránku, která byla přejmenována.
• 401 Unauthorized / 403 Forbidden — požadavek nebyl přihlášen, nebo uživatel na to nemá oprávnění.
• 500 Internal Server Error — serverový kód spadl. Skutečný důvod je v logách serveru, ne v prohlížeči.
• Chyby CORS — prohlížeč zablokoval požadavek na jinou doménu. Obvykle jde o nastavení na serveru.

Krok 3: Použijte vývojářské nástroje prohlížeče

Každý desktopový prohlížeč má zabudované vývojářské nástroje („devtools“). Ukazují, co stránka dělá v zákulisí. V Chrome, Edge a Firefoxu klikněte kamkoli na stránku pravým tlačítkem a zvolte Prozkoumat (Inspect), nebo stiskněte F12 (Cmd+Option+I na Macu). V Safari nejdřív zapněte nabídku Vývoj v nastavení Safari.

Stačí tři záložky.

Konzole

Záložka Konzole vypisuje chyby a zprávy z kódu stránky. Chyby jsou červeně. Pokud tlačítko po kliknutí nic nedělá, konzole téměř vždy ukáže červenou chybu přesně v okamžiku kliknutí. Zkopírujte celý text chyby (ve většině prohlížečů ji můžete kliknutím pravým tlačítkem zkopírovat).

Síť

Záložka Síť (Network) vypisuje každý požadavek, který stránka odešle: načtení dat, uložení formuláře, přihlášení. Otevřete ji a zopakujte kroky, které chybu vyvolávají.

• Hledejte řádky červeně nebo se stavem 400 a výš.
• Klikněte na neúspěšný řádek a podívejte se na Odpověď (Response). Chybová odpověď serveru tam často obsahuje zprávu užitečnější než cokoli na obrazovce.
• Poznamenejte si adresu požadavku a stavový kód. Věta „POST na /api/bookings vrátil 500“ je pro AI velmi užitečná.

Zaškrtněte Preserve log (Zachovat protokol), pokud chyba souvisí s obnovou stránky nebo přesměrováním, aby požadavky nezmizely.

Elements

Záložka Elements (nebo Inspector) ukazuje strukturu a styly stránky. Nejvíc se hodí u chyb rozložení: přejetím myší nad prvkem uvidíte zvýrazněnou velikost a odsazení. Upravovat tu nic nemusíte. Stačí říct „patička je na mobilu 2 000 pixelů široká a posouvá stránku do stran“.

Krok 4: Zkontrolujte logy serveru

Některé chyby se dějí na serveru, který prohlížeč nevidí. Klasickým znakem je chyba 500 v záložce sítě. Logy serveru, tedy textový výstup vašeho backendu za běhu, obvykle obsahují skutečnou chybu se stack trace (seznam funkcí, které běžely, když selhalo).

Kde je najdete, závisí na nástroji. Ve většině nástrojů pro tvorbu aplikací s AI můžete otevřít terminál nebo zobrazení logů projektu, nebo prostě požádat AI: „Zkontroluj logy serveru kvůli chybám z posledního požadavku a řekni mi, co selhalo.“

Krok 5: Popište chybu AI

Shromážděné informace dejte do tohoto tvaru:

Na stránce Rezervace, přihlášen jako člen: kliknul jsem na Zrušit u zítřejší lekce v 9:00. Očekával jsem: rezervace zmizí a lekce ukáže o jedno volné místo víc. Skutečnost: na obrazovce se nic nezměnilo. Konzole ukazuje TypeError: Cannot read properties of undefined (reading 'id') v BookingCard.tsx:31 a záložka sítě ukazuje, že DELETE /api/bookings/123 vrátil 500. Najdi příčinu, oprav ji a ověř, že zrušení funguje pro člena s jednou rezervací i s několika.

Proč je každá část důležitá:

• Kde a jako kdo zúží problém na jednu obrazovku a jednu roli.
• Přesné kroky umožní AI chybu reprodukovat.
• Očekávané vs. skutečné definuje, co znamená „opraveno“.
• Text chyby a selhávající požadavek ukazují přímo na příčinu.
• „Ověř, že…“ žádá AI, aby ověřila, ne jen upravila.

Pokud se AI pokusila o opravu dvakrát a nepovedlo se, požádejte ji o vysvětlení, než něco změní:

Zatím neměň kód. Co podle tebe způsobuje tento problém a jaké důkazy to podporují?

Špatná teorie se napsaná nahlas snadno pozná a opravit ji je mnohem levnější než špatná oprava.

Krok 6: Ověřte a zkontrolujte okolí

Když AI řekne, že je to opravené, zopakujte přesné kroky z kroku 1. Pak zkontrolujte věci kolem:

• Stejnou akci pro jinou roli uživatele
• Stejnou akci bez dat i s velkým množstvím dat
• Stránky, které sdílejí komponenty s tou, kterou jste opravili
• Obrazovku v šířce telefonu, pokud oprava zasáhla rozložení

Změny od AI někdy opraví jednu cestu a potichu rozbijí jinou. Dvouminutová kontrola teď ušetří zmatenou hodinu později.

Krok 7: Vraťte se zpět, nenabalujte další opravy

Pokud oprava věci zhoršila, nebo jste prošli třemi koly bez pokroku, vraťte se. Návrat k poslednímu funkčnímu stavu a přeformulování s lepšími důkazy téměř vždy předčí žádost o čtvrtou opravu nad třemi špatnými. Každý neúspěšný pokus zanechá kód, který matí další pokus.

Dobré návyky, které vrácení usnadní:

• Testujte po každé změně, ať víte, která změna co rozbila.
• Držte změny malé — jedna funkce nebo oprava na zprávu.
• Poznamenejte si poslední dobrou verzi, než začnete něco rizikového.
• Pokud je kód v Gitu, commitujte funkční verze, abyste se k nim mohli vrátit.

Běžné vzory chyb v aplikacích postavených s AI

Když problém není chyba

Některé „chyby“ jsou AI, která staví přesně to, co dostala v zadání, a zadání bylo nejednoznačné. Pokud oprava, kterou chcete, je ve skutečnosti změna chování, řekněte to jasně: „Změň to tak, aby…“. Pokud si nejste jisti, jaké správné chování vlastně je, rozhodněte to nejdřív. Náš průvodce psaním zadání pro nástroje na tvorbu aplikací s AI popisuje, jak pravidla specifikovat jasně. A pokud připravujete aplikaci pro skutečné uživatele, průvodce jak dostat AI prototyp do produkce popisuje kontroly, které stojí za to udělat před spuštěním.

Ladění v Mythexu

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

• Náhled pro reprodukci chyby, včetně rámce ve velikosti telefonu.
• /test nechá agenta proklikat váš živý náhled jako uživatel a nahlásí rozbité toky.
• /fix nasměruje agenta přímo na konkrétní rozbití.
• Režim plánu nechá agenta prozkoumat a vysvětlit věci dřív, než cokoli upraví.
• Kód → terminál ukazuje logy serveru vaší aplikace.
• Vrátit se k tomuto bodu u kterékoli odpovědi vrátí projekt zpět na tento kontrolní bod.

Pokud publikování selže, dialog publikování obvykle nabídne Opravit s AI, která přečte výstup sestavení nebo logy aplikace. Viz Ladění aplikace a Řešení problémů s publikováním v dokumentaci.

Otázky