JavaScript debuggen in de browser

Vrijwel alle websites gebruiken JavaScript. Meestal kun je een bestaand script integreren in je site, maar soms moet je zelf wat ontwikkelen.

Bij het ontwikkelen van software worden altijd fouten gemaakt. Het maakt niet uit wat voor software je maakt en in welke taal je dat doet, er zal altijd wel ergens een fout(je) zitten. JavaScript is daarop geen uitzondering.

Het opsporen en corrigeren van de fouten heet debuggen. Het debuggen van JavaScript-programma's is jarenlang een lastig en tijdrovend karwij geweest. Tegenwoordig gaat het allemaal wat eenvoudiger. De grote browsers hebben allemaal een debugger aan boord, of je kunt er een in je browser opnemen via een plug-in.

• Hoe start je de debugger?
• Druk op F12. Een andere methode is: Klik met de rechter muisknop op een onderdeel van je document en kies 'Element controleren'.
  In een site met frames start je eerst de debugger, daarna kun je met 'Element controleren' een element bekijken.
   
• De debuggers van de vier grote browsers lijken heel veel op elkaar. Je kunt scripts laten pauzeren op bepaalde regels code (breakpoint), waarden van variabelen bekijken en eventueel veranderen, eigenlijk alles wat een "gewone" debugger ook kan. Daarnaast kun je de hele DOM-structuur bekijken, CSS-hiërachie inspecteren, HTML nazien op juistheid, eigenlijk te veel om op te noemen.

Het console
Alle moderne in-browser debuggers hebben een console. Dat is een apart window waarin de browser zijn (fout-)meldingen schrijft. Je kunt er ook zelf meldingen naar toe sturen, zodat je het gedrag van je script kunt nagaan zonder de uitvoering van het script steeds te moeten onderbreken.

Je stuurt gegevens naar het console met de opdracht console. Daaraan koppel een een sub-commando, bijvoorbeeld log(). Tussen de haakjes zet je de string die je in het console wilt tonen, maar je kunt ook de inhoud van een variabele tonen, bijvoorbeeld:
console.log('x = ',x,'y = ',y).
Elke keer als het script langs deze opdracht komt, worden de waarden van x en y naar het console geschreven.

De opzet van het commando is identiek aan die van object.method(). Feitelijk is console ook een object dat alleen naar het console-window kan schrijven.
Behalve .log() heeft console nog veel meer 'method()'s, zie onderstaande opsomming. Deze is niet uitputtend en verschilt per browser.

Het console-object is browserafhankelijk. Behalve de methods in de tabel hier onder, heeft elke implementatie nog eigen methodes. De onderstaande methods werken in de consoles van Edge, FireFox en Chrome.

Method		Betekenis
log()		Stuurt een bericht naar het console. Dit kan tekst en/of de waarden van variabelen zijn.
debug()		Identiek aan console.log().
info()		Gelijk aan console.log(), met daarbij het icon .
warn()		Gelijk aan console.log(), met daarbij het icon .
error()		Gelijk aan console.log(), met daarbij het icon .
De methodes info(), warn() en error() kun je gebruiken om voor jezelf de ernst van een gebeurtenis aan te geven. Verder is er geen specifieke meerwaarde.
clear()		Maakt het console-venster leeg
assert()		Er zijn twee parameters: Een expressie, bijvoorbeeld x == 1, en een melding die in het console verschijnt als de uitkomst van de test waar is. De melding is rood gekleurd en toont daarbij het icon .
trace()		Schrijft een trace van de stack naar het console (dit is een lijst met achtereenvolgende function-aanroepen). Hiermee kun je nagaan hoe de programma-flow is verlopen vanaf het begin van het script tot in de "huidige" function. Er zijn geen parameters.
dir()		Hiermee stuur je een lijst met properties van een object naar het console. De naam van het betreffende object geef je mee als parameter. Je kunt alle geldige HTML- en JavaScript-DOM objecten meegeven, als ook zelfgemaakte JavaScript-objecten.
dirxml()		Hiermee stuur je een lijst met de HTML-code van een HTML- of XHTML-object naar het console. De naam van het betreffende object geef je mee als parameter.
group()		Hiermee neem je een aantal console-commando's samen. In het console worden ze inspringend weergegeven. Het is mogelijk om groepen te nesten. Elke groep springt verder in. Alle groepen moet je afsluiten met groupEnd() Elek grope heeft een naam, die je als parameter (string) meegeeft.
groupCollapsed()		Identiek aan group(). De uitvoer wordt 'ingeklapt' weergegeven in het console. Uitklappen kun je naar eigen inzicht zelf doen op het scherm. Dit is handig als je veel console-uitvoer genereert.
groupEnd()		Afsluiting van een group() of groupCollapsed()
profile()		Start de foutopsporing ("profiling")in een JavaScript. Optioneel kun je een naam voor het 'profiel' meegeven in de parameterlijst. Foutopsporing kan niet worden genest.
profileEnd()		Stopt de foutopsporing en toont het rapport in een apart venster of tabblad met de naam 'foutopsporing' of 'profile'. Een in profile() opgegeven naam wordt hierin vermeld. Bij FireBug verschijnt de uitvoer van een profile-actie in het console-venster.
time()		Hiermee start je een 'stopwatch', met het doel na te gaan hoe lang een actie duurt, bijvoorbeeld het maken van een berekening. Je moet de klok een naam geven. Dat doe je door de naam mee te geven in de parameterlijst. Je stopt de klok met timeEnd(). Je kunt meerdere stopwatches tegelijk laten lopen.
timeEnd()		Stopt de 'stopwatch' met de naam die je hebt gebruikt in de aanroep van time(). De tijd die is verstreken tussen de de aanroep van time() en timeEnd() wordt gemeld in het console-venster.
timeStamp()		Hiermee zet je een tijdmarkering in het console (in Chrome: op de tijdlijn) je kunt dit gebruiken om te bepalen hoeveel tijd er is verstreken sinds het laden van de pagina is begonnen. Op deze manier kun je ies te weten komen over hoe snel (een deel van) je pagina wordt geladen. Je kunt aan timeStamp() een tekst meegeven in de parameterlijst. Daarmee kun je verschillende tijdstempels uit elkaar houden.
count()		Hiermee kun je tellen hoe vaak een regel code (of code block) wordt uitgevoerd. Dat is handig bij het analyseren van do/while- en while-lussen.  Je kunt aan count() een tekst meegeven in de parameterlijst. Daarmee kun je verschillende tellers uit elkaar houden.

Tenslotte:
Een script debuggen is een vaardigheid die je jezelf kunt aanleren door het te doen. In het begin zal het je veel tijd kosten. Als je het maar vaak genoeg doet zal het je steeds gemakkelijker af gaan.
 
Je doet er goed aan om na het debuggen van een script de console-opdrachten uit je script te verwijderen. Voor de eindgebruiker is het ballast: het geeft geen zinvolle informatie en de console-opdrachten vertragen de werking van het script.