Breakpoints instellen
Pauzeer de uitvoering en inspecteer de state.
Breakpoints instellen is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 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 JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat is een breakpoint
Een breakpoint vertelt de debugger dat de uitvoering op een specifieke regel moet worden gepauzeerd. Tijdens de pauze kun je variabelen en de aanroepstack bekijken om de toestand van het programma te begrijpen.
Waarom breakpoints beter zijn dan loggen
Vergeleken met het verspreiden van logboekmeldingen laten breakpoints je op één moment elke variabele binnen het bereik bekijken zonder de code te wijzigen. Daarna kun je doorgaan of stap voor stap verdergaan.
Het Sources-paneel openen
In browser-DevTools staan breakpoints in het Sources-paneel. Je opent DevTools, schakelt over naar Sources en zoekt je scriptbestand in de bestandenstructuur.
Een breakpoint op een regel instellen
Klik naast een instructie op de marge met regelnummers om daar een breakpoint in te stellen. Er verschijnt een markering en de uitvoering wordt gepauzeerd wanneer die regel bijna wordt uitgevoerd.
De debugger-instructie
Als je een debugger-instructie aan je code toevoegt, wordt programmatisch een breakpoint geactiveerd wanneer DevTools is geopend. Verwijder deze instructie voordat je productiecode uitbrengt.
function compute(x) {
const doubled = x * 2
// a debugger statement on the next line would pause execution here
return doubled + 1
}Voorwaardelijke breakpoints
Als je met de rechtermuisknop op een regel klikt, kun je een voorwaarde toevoegen. De debugger pauzeert alleen wanneer de expressie waar is. Dat is bijzonder waardevol binnen lussen.
Logpunten
Een logpunt drukt een bericht af zonder te pauzeren. Het werkt als een tijdelijke logboekinstructie die je via DevTools toevoegt in plaats van de broncode te bewerken.
Variabelen bekijken
Wanneer de uitvoering is gepauzeerd, vermeldt het Scope-paneel lokale variabelen, closurevariabelen en globale variabelen met hun huidige waarden. Zo kun je je aannames controleren.
Expressies volgen
Het Watch-paneel evalueert de expressies die je opgeeft bij elke pauze. Zo kun je een berekende waarde volgen terwijl je stap voor stap door de code gaat.
Breakpoints bij gebeurtenissen
DevTools kan ook pauzeren bij gebeurtenissen, zoals een klik of een netwerkverzoek. De uitvoering wordt dan gepauzeerd zodra die gebeurtenis plaatsvindt.
Breakpoints beheren
Het Breakpoints-paneel vermeldt al je breakpoints. Je kunt ze tijdelijk uitschakelen met een selectievakje of verwijderen wanneer je klaar bent met fouten opsporen.
Korte controle
Test je kennis van breakpoints.
Samenvatting
Samenvatting: Breakpoints pauzeren de uitvoering zodat je die kunt onderzoeken.
- Stel ze in de marge van het Sources-paneel in
- De debugger-instructie pauzeert programmatisch
- Voorwaardelijke breakpoints pauzeren alleen wanneer de voorwaarde waar is
- Bekijk het bereik en volg expressies tijdens een pauze
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
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Breakpoints instellen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Breakpoints instellen”, 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 JavaScript Academy bevat in totaal 4 lessen.
Wat leer ik in “Breakpoints instellen”?
Pauzeer de uitvoering en inspecteer de state. Je oefent met JavaScript Academy 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 JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy 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 2 van 4.
Hoe lang duurt de les “Breakpoints instellen”?
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 JavaScript Academy?
Ja. Elke les over JavaScript Academy 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.
Alle lessen in deze cursus
- Meer dan console.log
- Breakpoints instellen
- Stap voor stap door code gaan
- Stacktraces lezen