Kako debagovati aplikaciju napravljenu uz AI: praktična metoda

Da debagujete aplikaciju napravljenu uz AI, prvo ponovo izazovite grešku namjerno, zatim prikupite dokaze — tačne korake, poruku o grešci i šta pokazuju konzola i kartica mreže u browseru — i to dajte AI-ju kao „uradio sam X, očekivao sam Y, dobio sam Z”. Ako popravka pogorša stvari, vratite se na posljednju radnu verziju umjesto da gomilate popravke jednu na drugu. Ne morate čitati kod da biste ovo dobro uradili.

Ovaj vodič pokriva cijeli ciklus, uključujući brzi obilazak alata za developere u browseru za one koji nisu programeri.

Ciklus debagovanja

Svaka popravka greške, bilo da je radi osoba ili AI, prati isti ciklus:

1. Ponovite — izazovite grešku pouzdano.
2. Posmatrajte — prikupite poruku o grešci i šta je aplikacija radila.
3. Opišite — dajte AI-ju precizne korake, očekivani rezultat i stvarni rezultat.
4. Popravite — neka AI promijeni jednu stvar.
5. Provjerite — ponovite tačno iste korake i potvrdite da je riješeno, i da ništa obližnje nije pokvareno.
6. Vratite se unazad po potrebi — ako je postalo gore, poništite i pokušajte ponovo s boljim informacijama.

Većina vremena izgubljenog na aplikacijama napravljenim uz AI dolazi od preskakanja koraka 1, 2 i 5: govorenja „pokvareno je”, prihvatanja izmjene bez testiranja, pa traženja još jedne popravke na pokvarenoj.

Korak 1: Ponovite grešku

Greška koju možete izazvati na zahtjev je pola riješena. Pokušajte da nađete najkraći niz koraka koji je uzrokuje.

Pitajte se:

• Da li se dešava svaki put? Ako samo ponekad, šta je drugačije kada se desi — određeni zapis, spora veza, odjavljenost?
• Da li se dešava svakom korisniku? Prijavite se na drugi nalog. Mnoge greške se pokažu samo za nove korisnike bez podataka, ili za korisnika s drugom ulogom.
• Da li se dešava na svim uređajima? Probajte ekran širine telefona i drugi browser.
• Da li je počela nakon određene izmjene? Ako je radilo juče, posljednjih nekoliko izmjena su glavni osumnjičeni.

Zapišite korake kao kratku numerisanu listu. Kasnije ćete je nalijepiti u prompt.

Korak 2: Pročitajte poruku o grešci

Poruke o greškama izgledaju zastrašujuće, ali trebaju vam samo neki njihovi dijelovi.

Ne morate je razumjeti; treba da je tačno kopirate. „Cannot read properties of undefined (reading 'name')” govori AI-ju da je kod očekivao podatke (vjerovatno rezervaciju ili korisnika) koji nisu stigli. Parafraza kao „neka undefined greška” gubi taj podatak.

Nekoliko čestih, otprilike prevedenih:

• Greške undefined / null — kod je očekivao podatke koji nisu stigli. Često stanje učitavanja ili prazna lista koju kod nije obradio.
• 404 Not Found — stranica ili adresa API-ja ne postoji. Često greška u ruti ili link na stranicu koja je preimenovana.
• 401 Unauthorized / 403 Forbidden — zahtjev nije bio prijavljen, ili korisnik nema pravo na to.
• 500 Internal Server Error — serverski kod je pao. Pravi razlog je u serverskim logovima, a ne u browseru.
• Greške CORS — browser je blokirao zahtjev prema drugom domenu. Obično problem u konfiguraciji na serveru.

Korak 3: Koristite alate za developere u browseru

Svaki desktop browser ima ugrađene alate za developere („devtools”). Pokazuju šta stranica radi iza scene. U Chrome-u, Edge-u i Firefox-u desni klik bilo gdje na stranici i izaberite Inspect, ili pritisnite F12 (Cmd+Option+I na Macu). U Safariju prvo uključite meni Develop u podešavanjima Safarija.

Treba vam samo tri kartice.

Console

Kartica Console prikazuje greške i poruke iz koda stranice. Greške su prikazane crveno. Ako dugme ništa ne radi kad kliknete, konzola će vrlo često pokazati crvenu grešku u trenutku klika. Kopirajte cijeli tekst greške (desni klik nudi opciju kopiranja u većini browsera).

Network

Kartica Network prikazuje svaki zahtjev koji stranica šalje — učitavanje podataka, čuvanje forme, prijava. Otvorite je, zatim ponovite korake koji izazivaju grešku.

• Tražite redove crvene boje ili sa statusom 400 ili više.
• Kliknite neuspješan red da vidite njegov Response. Serverska greška često sadrži poruku tu koja je korisnija od bilo čega na ekranu.
• Zabilježite URL zahtjeva i statusni kod — „POST na /api/bookings vratio je 500” je vrlo koristan podatak za AI.

Uključite Preserve log ako greška uključuje ponovno učitavanje stranice ili preusmjeravanje, da zahtjevi ne nestanu.

Elements

Kartica Elements (ili Inspector) prikazuje strukturu i stilove stranice. Najkorisnija je za greške u rasporedu: prelazak mišem preko elementa pokazuje njegovu veličinu i razmake. Ne morate ništa mijenjati ovdje; dovoljno je reći „podnožje je široko 2.000 piksela na mobilnom i gura stranicu u stranu”.

Korak 4: Provjerite serverske logove

Neke greške se dešavaju na serveru, gdje browser ne može da ih vidi. Greška 500 u kartici mreže je klasičan znak. Serverski logovi — tekstualni izlaz vaše pozadine dok radi — obično sadrže pravu grešku sa stek tragom (listom funkcija koje su bile pokrenute kada je pala).

Gdje ih nađete zavisi od alata. U većini AI alata za izradu aplikacija možete otvoriti terminal ili prikaz logova za projekat, ili jednostavno pitati AI: „Provjeri serverske logove za greške iz posljednjeg zahtjeva i reci mi šta je palo.”

Korak 5: Opišite grešku AI-ju

Prikupljeno stavite u ovakav oblik:

Na stranici Bookings, prijavljen kao član: kliknuo sam Cancel na sutrašnji čas u 9:00. Očekivano: rezervacija nestane i čas pokaže jedno slobodno mjesto više. Stvarno: na ekranu se ništa ne mijenja. Konzola pokazuje TypeError: Cannot read properties of undefined (reading 'id') na BookingCard.tsx:31, a kartica mreže pokazuje da je DELETE /api/bookings/123 vratio 500. Nađi uzrok, popravi ga i provjeri da otkazivanje radi za člana sa jednom rezervacijom i sa više njih.

Zašto je svaki dio važan:

• Gdje i kao ko sužava na jedan ekran i jednu ulogu.
• Tačni koraci omogućavaju AI-ju da ponovi grešku.
• Očekivano naspram stvarnog definiše šta znači „popravljeno”.
• Tekst greške i neuspjeli zahtjev upućuju direktno na uzrok.
• „Provjeri da…” traži od AI-ja da potvrdi, a ne samo da mijenja.

Ako je AI pokušao popravku dva puta i nije uspio, tražite da objasni prije nego što mijenja išta:

Ne mijenjaj kod još. Šta misliš da uzrokuje ovo, i koji dokazi to podržavaju?

Pogrešna teorija se lako uoči kad je napisana, i mnogo je jeftinije ispraviti je nego pogrešnu popravku.

Korak 6: Provjerite, zatim pogledajte okolinu

Kada AI kaže da je popravljeno, ponovite tačne korake iz Koraka 1. Zatim provjerite stvari oko toga:

• Istu radnju za drugu korisničku ulogu
• Istu radnju bez podataka i sa puno podataka
• Stranice koje dijele komponente sa onom koju ste popravili
• Ekran širine telefona, ako je popravka dirala raspored

Izmjene AI-ja ponekad poprave jedan put i tiho pokvare drugi. Dvominutna provjera sada štedi zbunjen sat kasnije.

Korak 7: Vratite se unazad umjesto gomilanja

Ako je popravka pogoršala stvari, ili ste prošli kroz tri kruga bez napretka, vratite se. Vraćanje na posljednju verziju koja je radila i ponovno formulisanje sa boljim dokazima gotovo uvijek nadmaši traženje četvrte popravke na tri pogrešne. Svaki neuspjeli pokušaj ostavlja kod iza sebe, a taj kod zbunjuje sljedeći pokušaj.

Dobre navike koje olakšavaju vraćanje:

• Testirajte nakon svake izmjene, da znate koja je izmjena pokvarila stvari.
• Držite izmjene malim — jedna funkcija ili popravka po poruci.
• Zabilježite posljednju dobru verziju prije nego što počnete nešto rizično.
• Ako je kod u Gitu, commitujte radne verzije da se možete vratiti na njih.

Česti obrasci grešaka u aplikacijama napravljenim uz AI

Kada problem nije greška

Neke „greške” su to što je AI napravio upravo ono što mu je rečeno, a opis je bio nejasan. Ako je popravka koju tražite zapravo promjena ponašanja, recite to jasno: „Promijeni da…”. Ako ne znate ni koje je ispravno ponašanje, prvo to odlučite. Naš vodič o pisanju promptova za AI alate za izradu aplikacija pokriva kako jasno navesti pravila. A ako pripremate aplikaciju za prave korisnike, kako prebaciti AI prototip u produkciju pokriva provjere koje vrijedi uraditi prije lansiranja.

Debagovanje na Mythexu

Mythex ima alate za svaki korak ciklusa:

• Pregled za ponavljanje greške, uključujući okvir veličine telefona.
• /test agent klikne kroz vaš živi pregled kao korisnik i prijavi pokvarene tokove.
• /fix usmjerava agenta specifično na kvarove.
• Plan režim omogućava agentu da istraži i objasni prije nego što išta izmijeni.
• Code → terminal prikazuje logove vaše serverske aplikacije.
• Revert to this point na bilo kojem odgovoru vraća projekat na taj checkpoint.

Ako objava ne uspije, dijalog za objavu obično nudi Fix with AI, koji čita izlaz builda ili logove aplikacije. Pogledajte Debagovanje vaše aplikacije i Rješavanje problema pri objavi u dokumentaciji.

Pitanja