Vibekoodausprojektin debuggaus – kun tekoälyn koodi ei toimi

Tekoäly generoi kauniin komponentin. Koodi näyttää siistiltä, rakenne loogiselta. Painat "Run" – ja kaikki hajoaa punaiseen virheilmoitukseen.

Jos tämä kuulostaa tutulta, olet hyvässä seurassa. Jokainen vibekoodaaja kohtaa tämän tilanteen. Se ei tarkoita, että teet jotain väärin. Se tarkoittaa, että teet oikeita asioita ja olet päässyt siihen vaiheeseen, jossa opit debuggaamaan.

Debuggaus on vibekoodauksen tärkein taito heti promptien kirjoittamisen jälkeen. Tämä opas näyttää, miten löydät ja korjaat virheet – myös silloin, kun et ymmärrä koodia rivi riviltä.

Miksi tekoälyn kirjoittama koodi hajoaa?

Tekoäly ei ole taikuri. Se ennustaa todennäköisintä seuraavaa sanaa perustuen valtavaan määrään koodia, jota se on nähnyt. Tästä seuraa muutama toistuva ongelmatyyppi.

Hallusinoidut API:t ja kirjastot. Tekoäly saattaa käyttää funktiota, jota ei oikeasti ole olemassa. Se on nähnyt tuhansia erilaisia kirjastoja ja sekoittaa niiden rajapintoja keskenään. Koodi näyttää uskottavalta, mutta viittaa johonkin, mitä ei ole.

Versioristiriidat. Tekoälyn koulutusdata on tietyltä ajanjaksolta. Se saattaa generoida koodia, joka toimi React 17:ssä mutta ei toimi React 19:ssä. Tai käyttää Next.js Pages Routerin syntaksia, vaikka projektisi käyttää App Routeria.

Puuttuva konteksti. Tekoäly ei näe koko projektiasi, ellei sitä erikseen kerro. Se ei tiedä, minkä nimisiä tiedostoja sinulla on, mitä tietokantaa käytät tai miten autentikointi on toteutettu. Se arvaa – ja arvaa joskus väärin.

Logiikkavirheet. Koodi käynnistyy ja näyttää toimivan, mutta tekee jotain väärin. Laskee väärin, näyttää väärää dataa tai käsittelee reunatapaukset huonosti. Nämä ovat salakavalia, koska mitään virheilmoitusta ei tule.

Hyvä uutinen: kun tunnistat nämä neljä kategoriaa, tiedät jo mistä etsiä ongelmaa.

Debuggaus-mindset vibekoodaajalle

Debuggaus ei vaadi, että ymmärrät jokaisen koodirivin. Se vaatii, että luet virheilmoituksen.

Kuulostaa itsestään selvältä, mutta tämä on yleisin virhe. Punainen teksti ilmestyy ruudulle ja ensireaktio on paniikki: "En ymmärrä mitään tästä." Mutta virheilmoitus kertoo melkein aina kolme asiaa: mikä meni pieleen, missä tiedostossa ja millä rivillä.

Sinun ei tarvitse ymmärtää koko virheilmoitusta. Riittää, että poimit siitä oleelliset kohdat ja syötät ne takaisin tekoälylle. Tästä päästäänkin ensimmäiseen tekniikkaan.

Tekniikka 1: Kopioi virhe, liitä promptiin

Tämä on vibekoodaajan ykköstyökalu. Yksinkertainen mutta tehokas.

Kun saat virheilmoituksen, kopioi se kokonaan ja liitä tekoälylle tällaisella promptilla:

Sain tämän virheen kun yritin käynnistää sovelluksen:

[liitä virheilmoitus tähän]

Tässä on koodi, joka aiheuttaa virheen:

[liitä relevantti koodi tähän]

Mistä virhe johtuu ja miten korjaan sen?

Tärkeintä on antaa molemmat: virheilmoitus ja koodi. Pelkkä "sain errorin, korjaa" ei riitä, koska tekoäly tarvitsee kontekstin. Lisää vinkkejä tehokkaaseen promptaamiseen löydät pikaoppaasta promptaamiseen.

Tekoäly on erityisen hyvä tunnistamaan tyypillisiä virheitä kuten puuttuvat importit, kirjoitusvirheet muuttujien nimissä ja väärät tyypit. Nämä muodostavat valtaosan vibekoodauksen virheistä, ja ne korjautuvat yleensä yhden kierroksen aikana.

Tekniikka 2: Pyydä tekoälyä selittämään koodi

Joskus koodi ei toimi eikä virheilmoitus ole selkeä. Silloin on hyödyllistä ymmärtää, mitä koodi yrittää tehdä.

Selitä tämä koodi askel askeleelta tavalliselle ihmiselle.
Mitä jokainen osa tekee ja missä järjestyksessä?

[liitä koodi tähän]

Tämä tekniikka on kuin pyytäisit tekoälyä piirtämään kartan koodista. Kun näet kokonaisuuden, huomaat usein itse kohdan, jossa logiikka ei täsmää. "Ai, tämä hakee dataa tuosta URL:stä – mutta sehän on väärä osoite."

Tämä on myös loistava tapa oppia. Jokainen selitys tekee sinusta paremman vibekoodaajan, koska alat tunnistaa rakenteita ja hahmottamaan koodin logiikkaa. Aloittamisen oppaassa käsitellään tätä oppimisprosessia tarkemmin.

Tekniikka 3: Eristä ongelma – kommentoi osia pois

Kun mikään ei tunnu toimivan, yksinkertaista. Poista tai kommentoi koodista osia ja katso, milloin virhe katoaa.

Käytännössä tämä tarkoittaa, että pyydät tekoälyä tekemään mahdollisimman yksinkertaisen version. Esimerkiksi:

Tämä komponentti ei toimi. Tee siitä mahdollisimman yksinkertainen
versio, jossa on vain yksi nappi ja yksi tekstikenttä.
Ei tyylejä, ei validointia, ei API-kutsuja.
Pelkkä perusrakenne.

Jos yksinkertainen versio toimii, alat lisätä ominaisuuksia takaisin yksi kerrallaan. Kun virhe palaa, olet löytänyt syyllisen.

Tämä on klassinen ohjelmistokehityksen tekniikka, joka toimii yhtä hyvin vibekoodauksessa. Isoa ongelmaa on vaikea ratkaista. Pieniä ongelmia on helppo ratkaista.

Tekniikka 4: Käytä selaimen ja terminaalin työkaluja

Vibekoodaajan ei tarvitse olla devtools-guru, mutta kaksi asiaa kannattaa oppia.

Selaimen konsoli (F12 tai Ctrl+Shift+J). Avaa se ja katso, näkyykö punaisia virheilmoituksia. Nämä kertovat JavaScript-virheistä, joita sivusto kohtaa. Kopioi ne ja käytä Tekniikkaa 1.

Terminaalin output. Jos käytät Cursoria tai muuta editoria, jossa sovellus pyörii terminaalissa, lue mitä sinne tulostuu. Erityisesti rivit, joissa lukee "Error", "Failed" tai "Warning". Nämä ovat kultaakin arvokkaampia.

Konkreettinen esimerkki: näet terminaalissa Module not found: Can't resolve 'lucide-react'. Tämä tarkoittaa, että koodi yrittää käyttää kirjastoa, jota ei ole asennettu. Ratkaisu on joko asentaa se (npm install lucide-react) tai pyytää tekoälyä käyttämään jotain muuta.

Lisää tyypillisistä virheistä ja niiden ratkaisuista löydät virheet-sivultamme.

Tekniikka 5: Aloita puhtaalta pöydältä

Joskus koodi on mennyt niin solmuun, että korjaaminen on hitaampaa kuin uudelleen tekeminen. Tämä on ok. Se ei ole epäonnistumista – se on strateginen päätös.

Kun huomaat, että olet kolmannella korjauskierroksella eikä tilanne parane, kokeile tätä:

Aloitetaan tämä komponentti alusta. Unohda aikaisempi koodi.

Haluan [kuvaa mitä haluat] ja tässä on tärkeää:
- [rajoite 1]
- [rajoite 2]
- [rajoite 3]

Tee ensin yksinkertainen toimiva versio. Lisätään ominaisuuksia sen jälkeen.

Avain on: kerro tällä kertaa tarkemmin. Ensimmäisestä kierroksesta opit, mitä tekoäly ymmärsi väärin. Käytä sitä tietoa paremman promptin kirjoittamiseen.

Käytännön esimerkki: API-kutsun debuggaus

Käydään läpi tyypillinen tilanne alusta loppuun.

Tilanne: Pyysit tekoälyä tekemään sivun, joka hakee säätietoja API:sta ja näyttää ne. Sivu latautuu mutta näyttää pelkkää tyhjää – ei dataa, ei virhettä.

Vaihe 1: Tarkista konsoli. Avaat selaimen devtoolsit (F12) ja näet: TypeError: Cannot read properties of undefined (reading 'temperature').

Vaihe 2: Syötä virhe tekoälylle.

Sain tämän virheen:
TypeError: Cannot read properties of undefined (reading 'temperature')

Koodi yrittää näyttää säätietoja, jotka haetaan API:sta.
Tässä on komponentti:
[liität koodin]

Mistä virhe johtuu?

Vaihe 3: Tekoäly vastaa. Se kertoo, että koodi yrittää lukea data.temperature ennen kuin API-kutsu on valmis. Kun sivu latautuu, data on vielä undefined, ja undefined.temperature kaataa kaiken.

Vaihe 4: Korjaus. Tekoäly lisää tarkistuksen: "Jos dataa ei vielä ole, näytä latausanimaatio." Ongelma ratkaistu.

Tämä on klassinen esimerkki tilanteesta, joka näyttää monimutkaiselta mutta on itse asiassa yksinkertainen. Koodi ei ollut "rikki" – se vain yritti käyttää dataa, jota ei vielä ollut. Virheilmoitus kertoi tarkalleen, mikä meni pieleen.

Ehkäise virheet paremmilla prompteilla

Paras debuggaus on se, jota ei tarvita. Muutama tapa vähentää virheitä jo promptausvaiheessa:

Kerro tech stack. "Käytän Next.js 15:ta App Routerilla, TypeScriptiä ja Tailwind CSS:ää." Tämä estää versioristiriidat.

Pyydä vaiheittain. Älä pyydä koko sovellusta kerralla. Pyydä ensin tietokannan rakenne, sitten API, sitten käyttöliittymä. Jokainen vaihe on helpompi debugata erikseen.

Pyydä virheenkäsittelyä eksplisiittisesti. "Lisää virheenkäsittely, jos API-kutsu epäonnistuu" pakottaa tekoälyn miettimään reunatapauksia.

Testaa heti. Älä generoi kolmea komponenttia putkeen. Generoi yksi, testaa se, ja jatka sitten seuraavaan. Virheet kasaantuvat, ja viittä päällekkäistä virhettä on paljon vaikeampi debugata kuin yhtä.

Käytä CLAUDE.md- tai Rules-tiedostoa. Jos käytät Cursoria tai Claude Codea, kirjoita projektisi perustiedot asetustiedostoon. Näin tekoälyllä on konteksti aina valmiina. Lue lisää CLAUDE.md-oppaasta.

Debuggaus on supervoima

Debuggaus tuntuu aluksi turhauttavalta. Mutta jokainen virhe, jonka ratkaiset, tekee sinusta paremman vibekoodaajan. Alat tunnistaa samoja virhetyyppejä. Opit lukemaan virheilmoituksia nopeammin. Prompteistasi tulee tarkempia, koska tiedät jo, mitä voi mennä pieleen.

Muista: ammattikoodaajat käyttävät valtaosan ajastaan debuggaamiseen. Se ei ole poikkeus normaalista – se on normaali. Erona on vain, että vibekoodaajana sinulla on tekoäly, joka auttaa myös virheiden korjaamisessa.

Seuraavan kerran, kun punainen virheilmoitus ilmestyy, älä panikoi. Kopioi se, liitä tekoälylle ja kysy: "Mistä tämä johtuu?" Vastaus on yleensä muutaman sekunnin päässä.

Jos olet vasta aloittamassa matkaa, tutustu vibekoodauksen aloittamisoppaaseen. Ja jos haluat ymmärtää, millaisia virheitä tyypillisesti tulee vastaan, katso yleisimmät vibekoodauksen virheet.