JavaScript Debugging

Fouten gebeuren altijd, wanneer je nieuwe computercode schrijft.

JavaScript Debugging

Het schrijven van JavaScript zonder debugger is moeilijk.

Het is mogelijk dat uw code syntaxfouten of logische fouten bevat die moeilijk te diagnosticeren zijn.

Meestal gebeurt er niets als JavaScript-code fouten bevat. Er verschijnt geen foutmelding en er zijn geen indicaties om fouten te vinden.

Meestal gebeurt er een fout wanneer je nieuwe JavaScript-code probeert te schrijven.

JavaScript debugger

Het vinden van fouten in programmeercodes wordt code-debuggen genoemd.

Debuggen is niet eenvoudig. Maar gelukkig hebben alle moderne browsers een ingebouwde debugger.

De ingebouwde debugger kan worden geopend of gesloten en dwingt foutmeldingen aan de gebruiker door te geven.

Met de debugger kunt u ook breakpoints instellen (de locatie waar de code wordt onderbroken) en variabelen controleren tijdens de uitvoering van de code.

Meestal wordt de debugger in de browser gestart via de F12-toets, en vervolgens wordt in het debugmenu 'Console' gekozen.

console.log() methode gebruiken

Als uw browser debugondersteuning biedt, kunt u console.log() Toon de waarde van JavaScript in het debugvenster:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1>Mijn Eerste Webpagina</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

Probeer het zelf uit

Tip:Bezoek onze JavaScript Console Referentiehandleiding voor meer informatie over de console.log() methode.

Instellen van een breakpoint

In het debugvenster kunt u breakpoints instellen in JavaScript-code.

Bij elke breakpoint zal JavaScript stoppen met uitvoeren, zodat u de waarden van JavaScript kunt controleren.

Na het controleren van de waarde kunt u de uitvoering van de code hervatten.

debugger-sleutelwoord

debugger De sleutelwoorden zullen de uitvoering van JavaScript stoppen en (indien aanwezig) de debug-functie aanroepen.

Dit is hetzelfde als het instellen van een breakpoint in de debugger.

Als de debugger niet beschikbaar is:debugger De statement heeft geen effect.

Als de debugger is geopend, zal deze code stoppen met uitvoeren voordat de derde regel wordt uitgevoerd.

Voorbeeld

var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Probeer het zelf uit

Debuggingtools van populaire browsers

Over het algemeen kun je debugging inschakelen via de F12-toets in de browser en 'Console' kiezen in het debugmenu.

Anders volg dan de volgende stappen:

Chrome

  • Open een browser
  • Kies hulpmiddelen van het menu
  • Kies ontwikkelaarshulpmiddelen van de tool
  • Tot slot, kies console

Firefox Firebug

  • Open een browser
  • Ga naar de volgende pagina: http://www.getfirebug.com
  • Volgens de volgende instructies: Hoe Firebug te installeren

Internet Explorer

  • Open een browser
  • Kies hulpmiddelen van het menu
  • Kies ontwikkelaarshulpmiddelen van de tool
  • Tot slot, kies console

Opera

  • Open een browser
  • Ga naar de volgende pagina: http://dev.opera.com
  • Volgens de volgende instructies: Hoe Firebug Lite te installeren

Safari Ontwikkelmenu

  • Klik op Safari-menu, voorkeuren, geavanceerd
  • Selecteer 'Ontwikkelmenu in menubalk inschakelen'
  • Kies 'Toon foutenconsole' wanneer de nieuwe optie 'Ontwikkelen' in het menu verschijnt

Wist je dat?

Debugging is het proces om te testen, te vinden en te verminderen van bugs (fouten) in een computerprogramma.

De eerste bekende computerbug was een echt insect (een soort kikker) dat vast zat in een elektronisch apparaat.