Boeken
JavaScript
Hoofdstuk 9. Testen en Debuggen
Een debugger gebruiken

JavaScript:
Een debugger gebruiken

Hoe:

Hier is een stukje JavaScript-code dat zich niet gedraagt zoals verwacht:

function buggyMultiply(a, b) {
    return a + b; // Oeps! Dit zou een vermenigvuldiging moeten zijn, geen optelling.
}

let result = buggyMultiply(5, 3);
console.log('Resultaat:', result);

De uitvoer is incorrect:

Resultaat: 8

Laten we debuggen in Chrome DevTools:

  1. Open deze JS in een browser.
  2. Klik met de rechtermuisknop en selecteer “Inspecteren” om DevTools te openen.
  3. Klik op het tabblad “Bronnen”.
  4. Vind je codefragment of pagina en zet een breekpunt door op het regelnummer naast de return-instructie te klikken.
  5. Vernieuw de pagina om het breekpunt te activeren.
  6. Controleer het “Scope” paneel om de lokale variabelen a en b te zien.
  7. Ga door met de “Volgende functieaanroep overslaan” knop.
  8. Vind de fout in de return-instructie.
  9. Corrigeer de code:
function buggyMultiply(a, b) {
    return a * b; // Gecorrigeerd!
}

let result = buggyMultiply(5, 3);
console.log('Resultaat:', result);

De gecorrigeerde uitvoer:

Resultaat: 15

Diepe Duik

Het concept van debuggen bestaat al sinds de vroege dagen van de informatica—de legende zegt dat het begon toen er een mot werd gevonden in een computer in de jaren 1940! Vandaag de dag bieden JavaScript debuggers zoals de ingebouwde browser tools (Chrome DevTools, Firefox Developer Tools) of IDE-geïntegreerde debuggers (Visual Studio Code, WebStorm) een heleboel functies.

Alternatieven voor ingebouwde debuggers zijn onder andere tools van derden zoals WebStorm of het gebruik van de goede oude console.log om de toestanden van variabelen te outputten. Maar deze bieden niet de real-time interactie en gedetailleerde inspectie die debuggers bieden.

Wat betreft de implementatiedetails, de meeste debuggers werken op een vergelijkbare manier: ze stellen je in staat om breekpunten in te stellen die de uitvoering pauzeren, stap voor stap door de code te gaan, de huidige toestand van variabelen te inspecteren, expressies te bekijken en zelfs waarden on the fly te manipuleren om verschillende scenario’s te testen.

Zie Ook

Het gebruik van een interactieve shell (REPL)Tests Schrijven