JavaScript debuggen

De inhoud van deze pagina is verouderd. Dat komt doordat de moderne browsers allemaal zelf een debugger aan boord hebben.
Voor kleine probleempjes zijn de technieken van voorbeeld 1 en 2 nog steeds bruikbaar. De techniek van voorbeeld 3 is ingehaald door de tijd, maar is te leuk om zomaar weg te gooien. Voorlopig blijft dit verhaal dus staan en wordt het onderhouden.
 
De debug-methode van voorbeeld 3 lijkt wel wat op die van de moderne browsers. Zie het item JavaScript debuggen in de browser.

Als je zelf computer-programma's schrijft, zul je daarbij regelmatig op fouten stuiten. Dat varieert van denkfouten bij het opzetten van je programma tot eenvoudige typefouten bij het bouwen van de code.
In het eerste geval zal het programma niet doen wat je wilt, in het tweede geval stopt de uitvoering van het programma met een foutmelding.

Als je programmeert in een "professionele" taal zoals Python of C#, werk je gewoonlijk in een ontwikkelomgeving. Één van belangrijkste onderdelen van zo'n omgeving is de debugger. Dat is een hulpprogramma waarmee je de hele loop van het programma stap voor stap kunt volgen, inclusief de wijziging van variabelen, aanroep van functies, enz. Deze aanpak is mogelijk omdat dit compilatie-talen zijn:
De broncode wordt omgezet in machinecode die vervolgens wordt aangeboden aan de processor om te worden verwerkt.
JavaScript wordt geïnterpreteerd, dat wil zeggen: op het moment dat het nodig is wordt de code omgezet in machinecode en gelijk uitgevoerd.

Een moderne debugger voor een interpretatie-taal werkt op de zelfde manier als bij een compilatie taal. Tegenwoordig hebben alle browsers dan ook de mogelijkheid om 'onder de motorkap' van scripts, CSS en HTML te kijken. Bij de meeste browsers druk je gewoon op F12.

Het al of niet beschikbaar hebben van een debugger zal ons er niet van weerhouden om onze JavaScripts te ontdoen van alle grote en kleine foutjes (bugjes). Er zijn wereldwijd tenslotte duizenden scripts en scriptjes gemaakt, die allemaal werken.

Op deze pagina wordt een tweetal betrekkelijk eenvoudige technieken beschreven die je kunnen helpen bij het debuggen van je eigen scripts.

Opmerking: Het gaat hier over het debuggen van nieuwe scripts. Je kunt dit niet gebruiken voor het opvangen van fout-condities in een gereed (werkend) script. Zie daarvoor de items JavaScript debuggen II: Error handler met try en catch en JavaScript debuggen III: Error handler met 'on error'.

• Er worden twee items besproken:
  1. Werken met alerts en confirms.
  2. Werken met een debug-function.

Werken met alert en confirm

• Als je de loop van een programma wilt volgen kun je op belangrijke plaatsen een melding laten geven met behulp van window.alert.
  Zie het onderstaande voorbeeld:

  for (i=0; i<5; i++) {
  if (i % 2 != 0) {
    window.alert('i = '+i+', (oneven)');
  } else {
    window.alert('i = '+i+', (even)');
  }
}

  Er wordt een lus gemaakt met de variabele i als teller. i loopt van 0 tot 5. Met behulp van een alert wordt gemeld of i even of oneven is.
  Druk op de knop om het te proberen.
   
  Test Voorbeeld 1
   
• Het nadeel van deze aanpak is dat je het script helemaal moet laten uitlopen. Dat kan erg lang duren. Je kunt het script niet zomaar onderbreken, tenzij je de browser afsluit.
   
• Deze aanpak wordt een stuk handiger te gebruiken als je window.confirm inzet. Dan kun je de lopende actie in het script gewoon afbreken.
  Zie het onderstaande voorbeeld, dat een uitbreiding is van het vorige:

  for (i=0; i<5; i++) {
  if (i % 2 != 0) {
    if(!window.confirm('i = '+i+', (oneven)')) break;
  } else {
    if(!window.confirm('i = '+i+', (even)')) break;
  }
}

  Druk op de knop om het te proberen. Merk op dat het script stopt als je in de confirm op Annuleren drukt (er staat een uitroepteken voor window.confirm).
  Als je op OK drukt gaat het script verder.
   
  Test Voorbeeld 2
   
• Als je dit gebruikt om een geneste lus te onderbreken moet je meer dan één break inprogrammeren!
   

Werken met een debug-function

• De aanpak met alert en confirm is geschikt als het probleem niet al te ingewikkeld is (of lijkt te zijn). Voor moeilijke dingen kan het handig zijn om de gegevens in een apart window te tonen. Daarvoor wordt een aparte function in de JavaScript code opgenomen, die je weer weghaalt als het debuggen klaar is.
  Deze functie kan ook allerhande extra gegevens tonen; dat is een kwestie van programmeren.
   
• Speciaal voor deze website heb ik een een dergelijke debugger ontwikkeld op basis van een bestaand script. De code staat onderaan deze bladzijde. Je kunt hem downloaden om zelf ook te gebruiken.
• Als je de debugger aanroept vanuit een function wordt dat gemeld.
   
• Het werkt niet lekker in browsers met tabbladen die zo zijn ingesteld dat elk nieuw venster in een nieuw tabblad moet worden geopend. Het werkt het beste als de uitvoer van de debugger in een pop-up window wordt getoond.
   
• Als je op onderstaande knop drukt wordt een voorbeeld van deze aanpak getoond. De onderstaande code wordt hierin gede-bugd. Het is bijna dezelfde code als bij Voorbeeld 2, alleen loopt de teller tot 15 in plaats van tot 5:

  for (i=0; i<15; i++) {
  debug = true;
  if (i % 2 != 0) {
    if (!dbg('i = '+i+' (oneven)', true)) break;
  } else {
    dbg('i = '+i+' (even)', false);
  }
}

• In de code staan een opdracht debug = true; en twee aanroepen van een function dbg(). Die zijn voor de duidelijkheid vet gezet. Bespreking volgt hieronder.

• Om de debugger te gebruiken neem de de volgende regel op in de <HEAD> van de HTML-file waarin het JavaScript staat dat je wilt debuggen:

  <script src="debug.js"></script>

• Je activeert de debugger door de function dbg() aan te roepen. Dat kan op elke gewenste plaats in het script.
  Er verschijnt een popup-window dat de uitvoer opvangt. Dit window kan tijdens de debug-sessie worden gesloten. Bij elke aanroep van dbg() wordt zonodig een nieuw exemplaar geopend.
  In de meeste browsers geeft de debugger een foutmelding (en kan zelfs vastlopen) als je het uitvoervenster sluit terwijl er een confirm op het scherm staat!
   
• De function dbg() staat in de file debug.js. Deze file hoeft niet te worden veranderd om hem te kunnen gebruiken, maar het kan wel. Zie onderstaande tabel.
   

  Variabele	Betekenis
  debug	Vlag waarmee wordt aangegeven of de debug-fuctie dbg() actief is of niet. Hier: false, er wordt dus niet gede-bugged.
  debugWindowReset	Vlag waarmee wordt aangegeven of het uitvoerwindow automatisch moet worden leeggemaakt. Hier: false, het uitvoerwindow wordt dus niet automatisch leeggemaakt.
  debugResetTime	Tijd (milliseconden) die wordt gewacht alvorens het uitvoerwindow te verversen. Wordt alleen gebruikt als debugWindowReset = true;. Hier: 6000 ms (dus 6 seconden)
  schermBreedte	Breedte van het uitvoerwindow van de debugger. Hier: 380 pixels.
  schermHoogte	Hoogte van het uitvoerwindow van de debugger. Hier: 500 pixels.

  
   
  Geadviseerd wordt om deze variabelen te behandelen als default-waarden. Verander ze indien nodig/nuttig in het het script dat je wilt debuggen.
   
• De function dbg heeft twee parameters:
   

  Parameter	Betekenis
  message	Hier geeft je de melding op die je in de uitvoer te zien wilt kijgen. Dit is een string, die je op dezelfde manier moet opzetten als bij een alert of confirm.
  breakpoint	Je kunt hier true of false invullen. Bij true stopt de uitvoering van het script. Er verschijnt een confirm op het scherm om te vragen of je wilt stoppen of doorgaan. Je kunt op dezelfde manier op dbg() reageren als op een confirm. In dit voorbeeld wordt de lus onderbroken met een break als je op "Annuleren" klikt. Bij false wordt alleen de melding in message in het uitvoervenster gezet.

  
   
• Als je klaar bent met debuggen moet je de aanroepen van dbg() uit je script verwijderen alsmede de verwijzing naar debug.js. Anders krijgen de gebruikers van je script allerhande vreemde meldingen op hun beeldscherm en dat was nou net niet de bedoeling!

Gebruik:

• De code staat in de <HEAD> en in Javascripts in de <HEAD> en/of de <BODY> op de plaats waar die nodig is.

De code wordt in de tekst genoemd.

Downloaden:
 
Druk op de knop:  File: voorb141.zip, 1713 bytes.