11. De dev-tools debugger

Elke browser biedt de mogelijkheid om JavaScript code te debuggen, hiervoor gebruik je het Developer Tools venster in je browser. Net zoals met de debugger in Visual Studio of VS Code voor een C# applicatie, kan je met de JavaScript debugger breakpoints plaatsen, de inhoud van variabelen bekijken, het call-stack van een functie bekijken, ...

Je kan dit venster openen via:

Je kunt de Developer Tools op de volgende manieren openen:

• Een sneltoets: F12 of Ctrl + Shift + I (Windows/Linux) / Cmd + Option + I (Mac).
• De rechtermuisknop: Klik ergens op de pagina en kies Inspecteren.
• Ga vervolgens naar het tabblad Sources (in Chrome/Edge) of Debugger (in Firefox).

Chrome

Figuur 0: Debugger in Chrome

Firefox

Figuur 0: Debugger in FireFox

Breakpoints

Breakpoints worden geplaatst door met de rechtermuisknop op een lijn code te klikken, of door het debugger statement te gebruiken in JavaScript code.

Figuur 0: Breakpoints

Via de "Step" knoppen op bovenstaand screenshot kan door de code genavigeerd worden. Deze knoppen hebben volgende betekenis:

1. Resume (Play): Ga verder tot het volgende breakpoint.
2. Step Over: Ga naar de volgende regel, maar duik niet in functies die daar worden aangeroepen.
3. Step Into: Duik wél in een functie om te zien wat er binnenin gebeurt.
4. Step Out: Spring direct terug naar de plek waar de huidige functie werd aangeroepen.

Variabelen en Scope Inspecteren

Terwijl de code gepauzeerd is, geeft het venster Scope precies weer welke waarden variabelen op dat moment hebben:

Sectie	Beschrijving
Local	Variabelen binnen de huidige functie-scope.
Global	Variabelen in de wereldwijde scope (zoals window of document).
Watch	Handmatig toegevoegde variabelen die je constant wilt monitoren.