Een bug lokaliseren
Isoleer het probleem met hulp van AI.
Een bug lokaliseren is een gratis Vibe-coding-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vibe-coding. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vibe-coding bevat in totaal 4 lessen.
Wanneer er geen duidelijke fout is
Soms crasht er niets — de app doet gewoon het verkeerde. De knop werkt niet, het totaal klopt niet of de gegevens worden nooit weergegeven. Geen rode tekst om te plakken.
Hier begint echte foutopsporing: afbakenen waar het probleem werkelijk zit. Het goede nieuws? AI is hiervoor een geweldige partner — als je weet hoe je het onderzoek moet sturen.
Het kernidee: verdelen en overwinnen
Ergens tussen je invoer en je uitvoer zit een bug verstopt. Het is jouw taak om de zoekruimte steeds in tweeën te delen, totdat je de bug hebt ingesloten.
Zie het als het vinden van een kapot lampje in een snoer met lampjes: je controleert eerst het midden. Werkt de eerste helft goed? Dan zit de breuk in de tweede helft. Dit is de krachtigste manier van denken bij het debuggen.
Je beste vriend: console.log
De eenvoudigste manier om een bug te lokaliseren, is door op verschillende punten waarden af te drukken. Voer dit uit — de logregels laten precies zien welke waarde elke variabele onderweg bevat.
Wanneer de afgedrukte waarde niet is wat je verwachtte, heb je de globale locatie van de bug gevonden.
function getDiscountedPrice(price, percent) {
console.log("input price:", price);
console.log("input percent:", percent);
const discount = price * percent;
console.log("discount:", discount);
return price - discount;
}
console.log("final:", getDiscountedPrice(100, 20));Lees het spoor
Bekijk de uitvoer die je zojuist zag. De eindprijs is negatief geworden! De logregels laten zien waarom: percent was 20, maar de berekening verwachtte 0.20. De logregel voor discount toonde 2000 — een overduidelijke aanwijzing.
Dat is lokaliseren in actie: de logregels wezen naar de exacte regel waar de werkelijkheid afweek van je verwachting. Je lost het niet blind op — je lokaliseert het probleem en lost het daarna op.
Vraag AI om logregels toe te voegen
Je hoeft logregels niet zelf op de juiste plekken te zetten. Vraag je AI-tool om de code voor je van logregels te voorzien. Dit is een uitstekende taak voor Cursor, Claude Code of Copilot.
"This function returns the wrong total and I can't tell
why. Add console.log statements at each step so I can
see how the value changes. Don't change the logic yet —
just help me see what's happening."Commentaar maken om te isoleren
Een andere truc om te lokaliseren: schakel tijdelijk stukken code uit. Als je een bepaald onderdeel verdenkt, maak je er commentaar van (of retourneer je vroegtijdig) en kijk je of het probleem verdwijnt.
Verdwijnt de bug, dan zit die in het deel dat je hebt verwijderd. Blijft de bug bestaan, kijk dan ergens anders. Met elke test maak je de hooiberg kleiner.
function renderPage() {
loadHeader();
// loadSidebar(); // <- commented out to test
loadContent();
}
// Bug gone? The problem was in loadSidebar().
// Bug still here? Look at loadHeader or loadContent.Controleer je aannames
De meeste hardnekkige bugs ontstaan door een verkeerde aanname: 'Ik nam aan dat deze variabele een getal bevatte, maar het is eigenlijk tekst.' Lokaliseren betekent dat je deze aannames één voor één test.
Een goede AI-prompt hiervoor is:
"Here's my function and what I expect each variable to
hold. Tell me which of my assumptions might be wrong,
and suggest one console.log I could add to confirm
the most likely one."Verwarring tussen typen is verraderlijk
Een veelvoorkomende verborgen bug: een waarde is tekst terwijl je denkt dat het een getal is. Voer dit uit — het resultaat ziet er vreemd uit totdat je beseft dat "5" een tekenreeks is, waardoor + waarden aan elkaar plakt in plaats van ze op te tellen.
Door het type te loggen (en niet alleen de waarde), ontdek je dit meteen.
const quantity = "5"; // came from a form input as text
const price = 10;
console.log("sum looks like:", quantity + price);
console.log("type of quantity:", typeof quantity);
console.log("fixed:", Number(quantity) + price);Beperk de stappen om het probleem te reproduceren
Lokaliseren gaat niet alleen over code — het gaat ook over handelingen. Zoek de kortste reeks die de bug veroorzaakt.
Gebeurt het elke keer, of alleen met een leeg veld? Alleen bij de tweede klik? Alleen met bepaalde gegevens? Elk antwoord maakt de lijst met verdachten kleiner. Geef deze bevindingen aan AI:
"I narrowed it down: the crash only happens when the
search box is EMPTY and I press Enter. With any text
it works fine. Given this, where should I look in
this handler function? [paste function]"Gebruik de debugger voor lastige gevallen
Bij lastigere bugs kun je in browser-DevTools en editors zoals Cursor een breakpoint instellen — de code pauzeert op een regel, zodat je elke variabele op dat moment kunt bekijken.
Je hebt dit niet voor alles nodig; console.log volstaat in de meeste gevallen. Maar weet dat deze mogelijkheid bestaat. Je kunt AI zelfs vragen: 'Waar moet ik een breakpoint zetten om dit te onderscheppen?' Dan wijst de tool je naar de juiste regel.
Een werkwijze om te lokaliseren
Breng dit samen in een herhaalbare lus:
- 1. Beschrijf de verwachte en de werkelijke uitvoer
- 2. Log een tussenpunt of schakel het uit om het probleem in tweeën te delen
- 3. Controleer in welke helft de bug zit
- 4. Herhaal dit totdat je de exacte regel hebt gevonden
- 5. Geef AI de gelokaliseerde plek en je bevindingen voor een gerichte oplossing
Zo verander je 'ergens in mijn 500 regels' in 'deze ene regel, regel 42'.
Snelle controle
Je app toont een verkeerd totaal, maar geeft geen foutmelding. Wat is de slimste eerste stap om het probleem te lokaliseren?
Samenvatting: je kunt elke bug insluiten
Je hebt geleerd hoe je kunt debuggen, zelfs als er geen foutmelding is om te plakken. Je gereedschapskist bevat nu:
- Verdeel en heers — deel de zoekruimte steeds in tweeën
- Log waarden en typen met console.log om de werkelijkheid te zien
- Maak van gedeelten commentaar om de boosdoener te isoleren
- Test je aannames en beperk de stappen om het probleem te reproduceren
- Laat AI logregels toevoegen, breakpoints voorstellen en aannames bevestigen
Maar wat als jij en AI allebei in een lus vastlopen? Dat is de laatste les: wanneer AI vastloopt.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 25
- Lessen
- 100
Veelgestelde vragen
Is de les “Een bug lokaliseren” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vibe-coding, waaronder “Een bug lokaliseren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vibe-coding bevat in totaal 4 lessen.
Wat leer ik in “Een bug lokaliseren”?
Isoleer het probleem met hulp van AI. Je oefent met Vibe-coding door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vibe-coding te beginnen?
Ervaring vooraf is niet nodig. Vibe-coding op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Een bug lokaliseren”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vibe-coding?
Ja. Elke les over Vibe-coding bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.