Kako odpraviti napake v aplikaciji, zgrajeni z AI: praktična metoda

Napako v aplikaciji, zgrajeni z AI, odpravite tako, da jo najprej namerno znova sprožite, nato zberete dokaze – natančne korake, sporočilo o napaki ter to, kaj kažeta konzola in zavihek omrežja v brskalniku – in to dajte AI kot „naredil sem X, pričakoval sem Y, dobil sem Z“. Če popravek stvari poslabša, se vrnite na zadnjo delujočo različico, namesto da popravke nalagate drug na drugega. Za to ne rabite brati kode.

Ta vodnik pokriva celoten cikel, vključno s hitrim pregledom orodij za razvijalce v brskalniku za ljudi, ki niso programerji.

Cikel odpravljanja napak

Vsak popravek napake, ne glede na to, ali ga naredi človek ali AI, sledi istemu ciklu:

1. Ponovite – napako sprožite zanesljivo.
2. Opazujte – zberite sporočilo o napaki in to, kaj je aplikacija počela.
3. Opišite – dajte AI natančne korake, pričakovani in dejanski rezultat.
4. Popravite – naj AI spremeni eno stvar.
5. Preverite – ponovite točno iste korake in potrdite, da je popravljeno ter da se nič v bližini ni pokvarilo.
6. Vrnite se nazaj, če je treba – če je postalo slabše, razveljavite in poskusite znova z boljšimi informacijami.

Večina časa, zapravljenega pri aplikacijah, zgrajenih z AI, izvira iz preskakovanja korakov 1, 2 in 5: rečete „je pokvarjeno“, sprejmete spremembo brez preizkusa in nato zahtevate nov popravek na pokvarjenem.

1. korak: ponovite napako

Napaka, ki jo lahko sprožite na zahtevo, je že pol popravljena. Poskusite najti najkrajše zaporedje korakov, ki jo povzroči.

Vprašajte se:

• Se zgodi vsakič? Če se zgodi samo včasih, kaj je drugače, ko se zgodi – določen zapis, počasna povezava, odjava?
• Se zgodi vsakemu uporabniku? Prijavite se z drugim računom. Mnoge napake se pokažejo samo novim uporabnikom brez podatkov ali uporabnikom z drugo vlogo.
• Se zgodi na vseh napravah? Preizkusite zaslon v širini telefona in drug brskalnik.
• Je začela po določeni spremembi? Če je delovalo včeraj, so zadnje spremembe glavni osumljenci.

Korake zapišite kot kratek oštevilčen seznam. Pozneje ga boste prilepili v poziv.

2. korak: preberite sporočilo o napaki

Sporočila o napakah so zastrašujoča, vendar potrebujete le nekaj njihovih delov.

Ni vam treba razumeti; treba je kopirati natanko. „Cannot read properties of undefined (reading 'name')“ pove AI, da je koda pričakovala podatke (verjetno rezervacijo ali uporabnika), ki niso bili tam. Parafraza, kot je „neka napaka undefined“, to izgubi.

Nekaj pogostih, grobo prevedenih:

• Napake undefined / null – koda je pričakovala podatke, ki niso prispeli. Pogosto gre za stanje nalaganja ali prazen seznam, ki ga koda ni obravnavala.
• 404 Not Found – stran ali naslov API ne obstaja. Pogosto napačno črkovana pot ali povezava na stran, ki je bila preimenovana.
• 401 Unauthorized / 403 Forbidden – zahteva ni bila prijavljena ali uporabnik tega ne sme narediti.
• 500 Internal Server Error – koda na strežniku se je zrušila. Pravi razlog je v dnevnikih strežnika, ne v brskalniku.
• Napake CORS – brskalnik je blokiral zahtevo na drugo domeno. Običajno gre za težavo s konfiguracijo na strežniku.

3. korak: uporabite razvijalska orodja brskalnika

Vsak namizni brskalnik ima vgrajena razvijalska orodja („devtools“). Pokažejo, kaj stran počne v ozadju. V Chromu, Edgeu in Firefoxu z desnim klikom kjerkoli na strani izberite Preglej (Inspect) ali pritisnite F12 (Cmd+Option+I na Macu). V Safariju najprej vklopite meni Develop v nastavitvah Safarija.

Potrebujete samo tri zavihke.

Konzola

Zavihek Konzola prikazuje napake in sporočila iz kode strani. Napake so prikazane rdeče. Če gumb ne naredi ničesar, ko kliknete nanj, bo konzola zelo pogosto pokazala rdečo napako ob kliku. Kopirajte celotno besedilo napake (v večini brskalnikov z desnim klikom dobite možnost kopiranja).

Omrežje

Zavihek Omrežje (Network) prikazuje vsako zahtevo, ki jo stran pošlje – nalaganje podatkov, shranjevanje obrazca, prijavo. Odprite ga, nato ponovite korake, ki sprožijo napako.

• Poiščite vrstice, ki so rdeče ali imajo status 400 ali več.
• Kliknite neuspelo vrstico, da vidite njen Odgovor (Response). Napaka strežnika tam pogosto vsebuje sporočilo, ki je koristnejše kot karkoli na zaslonu.
• Zapišite URL zahteve in statusno kodo – stavek „POST na /api/bookings je vrnil 500“ je zelo koristen za AI.

Označite Preserve log, če napaka vključuje ponovno nalaganje strani ali preusmeritev, da zahteve ne izginejo.

Elementi

Zavihek Elements (ali Inspector) prikazuje strukturo strani in sloge. Najkoristnejši je za napake v postavitvi: če se premaknete nad element, se označijo njegova velikost in razmiki. Ni vam treba ničesar urejati; dovolj je reči „noga strani je na mobilni napravi široka 2.000 slikovnih pik in potiska stran vstran“.

4. korak: preverite dnevnike strežnika

Nekatere napake se zgodijo na strežniku, kjer brskalnik ne more videti. Napaka 500 v zavihku omrežja je klasičen znak. Dnevniki strežnika – besedilni izpis vašega zaledja med delovanjem – običajno vsebujejo pravo napako s skladom klicev (seznam funkcij, ki so se izvajale, ko je odpovedala).

Kje jih najdete, je odvisno od orodja. V večini gradnikov aplikacij z AI lahko odprete terminal ali pogled dnevnikov za projekt ali preprosto vprašate AI: „Preveri dnevnike strežnika za napake zadnje zahteve in mi povej, kaj je odpovedalo.“

5. korak: opišite napako AI

Zbrane podatke spravite v tako obliko:

Na strani Rezervacije, prijavljen kot član: kliknil sem Prekliči pri jutrišnjem 9:00 razredu. Pričakovano: rezervacija izgine in razred pokaže eno prosto mesto več. Dejansko: na zaslonu se nič ne spremeni. Konzola kaže TypeError: Cannot read properties of undefined (reading 'id') v BookingCard.tsx:31, zavihek omrežja pa kaže, da je DELETE /api/bookings/123 vrnil 500. Poišči vzrok, popravi ga in preveri, da preklic deluje za člana z eno rezervacijo in za člana z več rezervacijami.

Zakaj je vsak del pomemben:

• Kje in kot kdo zoži na en zaslon in eno vlogo.
• Natančni koraki omogočijo AI, da napako ponovi.
• Pričakovano proti dejanskemu opredeli, kaj pomeni „popravljeno“.
• Besedilo napake in neuspela zahteva kažeta neposredno na vzrok.
• „Preveri, da …“ od AI zahteva preverjanje, ne le urejanje.

Če je AI poskusil popraviti dvakrat in ni uspel, ga prosite, naj pojasni, preden kaj spremeni:

Ne spreminjaj kode še. Kaj misliš, da povzroča to težavo in katere dokaze imaš za to?

Napačno teorijo je enostavno opaziti, ko je zapisana, in mnogo cenejše jo je popraviti kot napačen popravek.

6. korak: preverite in pogledajte, kaj je v bližini

Ko AI reče, da je popravljeno, ponovite točne korake iz 1. koraka. Nato preverite stvari okoli:

• Isto dejanje za drugo uporabniško vlogo
• Isto dejanje brez podatkov in z veliko podatki
• Strani, ki delijo komponente s tisto, ki ste jo popravili
• Zaslon v širini telefona, če je popravek vplival na postavitev

Spremembe AI včasih popravijo eno pot in tiho pokvarijo drugo. Dvominutno preverjanje zdaj prihrani zmedeno uro kasneje.

7. korak: vrnite se nazaj, namesto da nalagate še več

Če je popravek stvari poslabšal ali ste šli čez tri kroge brez napredka, se vrnite nazaj. Vrnitev na zadnjo različico, ki je delovala, in ponovno oblikovanje vprašanja z boljšimi dokazi skoraj vedno premaga zahtevo po četrtem popravku na tri napačne. Vsak neuspeli poskus pusti kodo, ki zmede naslednjega.

Dobre navade, ki olajšajo vrnitev:

• Preizkusite po vsaki spremembi, da veste, katera sprememba je pokvarila stvari.
• Ohranjajte majhne spremembe – ena funkcija ali popravek na sporočilo.
• Zapišite zadnjo dobro različico, preden začnete s tveganim delom.
• Če je koda v Gitu, zabeležite delujoče različice, da se lahko vrnete k njim.

Pogoste vzorce napak v aplikacijah, zgrajenih z AI

Ko težava ni napaka

Nekatere „napake“ so AI, ki gradi točno to, kar mu je bilo naročeno, in opis je bil dvoumen. Če je popravek, ki ga zahtevate, dejansko sprememba vedenja, to povejte jasno: „Spremeni tako, da …“. Če niste prepričani, kakšno je pravilno vedenje, to najprej odločite. Naš vodnik o pisanju pozivov za gradnike aplikacij z AI pokriva, kako jasno določiti pravila. In če se pripravljate na prave uporabnike, prehod AI prototipa v produkcijo pokriva preverjanja, ki se splačajo pred lansiranjem.

Odpravljanje napak v Mythexu

Mythex ima orodja za vsak korak cikla:

• Predogled za ponovitev napake, vključno z okvirjem v velikosti telefona.
• /test – agent klikne skozi vaš živi predogled kot uporabnik in poroča o pokvarjenih tokovih.
• /fix usmeri agenta posebej na pokvarjene dele.
• Način načrta (Plan) omogoča, da agent preišče in razloži, preden kaj ureja.
• Koda → terminal prikaže dnevnike strežnika vaše aplikacije.
• Vrni se na to točko (Revert to this point) pri vsakem odgovoru vrne projekt na ta kontrolni zapis.

Če objava ne uspe, pogovorno okno za objavo ponavadi ponudi Popravi z AI, ki prebere izpis gradnje ali dnevnike aplikacije. Glejte Odpravljanje napak v aplikaciji in Odpravljanje težav pri objavi v dokumentaciji.

Vprašanja