JavaScript -foutopsporing
Fouten kunnen (zullen) gebeuren, elke keer dat u een nieuwe computercode schrijft.
Foutopsporing in codes
Programmeercode kan syntaxisfouten of logische fouten bevatten.
Veel van deze fouten zijn moeilijk te diagnosticeren.
Als programmeercode fouten bevat, gebeurt er vaak niets. Er zijn geen foutmeldingen en je krijgt ook geen indicatie waar je naar fouten moet zoeken.
Het zoeken naar (en oplossen van) fouten in programmeercode wordt code debugging genoemd.
JavaScript-foutopsporing
Debuggen is niet eenvoudig. Maar gelukkig hebben alle moderne browsers een ingebouwde JavaScript-debugger.
Ingebouwde debuggers kunnen worden in- en uitgeschakeld, waardoor fouten aan de gebruiker moeten worden gerapporteerd.
Met een debugger kun je ook breekpunten instellen (plaatsen waar de uitvoering van code kan worden gestopt) en variabelen onderzoeken terwijl de code wordt uitgevoerd.
Normaal gesproken volgt u anders de stappen onderaan deze pagina, activeert u debuggen in uw browser met de F12-toets en selecteert u "Console" in het debugger-menu.
De console.log()-methode
Als uw browser foutopsporing ondersteunt, kunt u gebruiken console.log()om JavaScript-waarden in het foutopsporingsvenster weer te geven:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
Tip: Lees meer over de console.log()methode in onze JavaScript Console Reference .
Breekpunten instellen
In het debugger-venster kunt u breekpunten instellen in de JavaScript-code.
Bij elk onderbrekingspunt stopt JavaScript en kunt u JavaScript-waarden onderzoeken.
Nadat u de waarden heeft onderzocht, kunt u de uitvoering van de code hervatten (meestal met een afspeelknop).
Het debugger-trefwoord
Het debuggersleutelwoord stopt de uitvoering van JavaScript en roept (indien beschikbaar) de foutopsporingsfunctie aan.
Dit heeft dezelfde functie als het instellen van een breekpunt in de debugger.
Als er geen foutopsporing beschikbaar is, heeft de debugger-instructie geen effect.
Als de debugger is ingeschakeld, stopt deze code met uitvoeren voordat de derde regel wordt uitgevoerd.
Voorbeeld
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
Debuggingtools van de belangrijkste browsers
Normaal gesproken activeer je debugging in je browser met F12 en selecteer je "Console" in het debugger-menu.
Volg anders deze stappen:
chroom
- Open de browser.
- Selecteer in het menu "Meer tools".
- Kies bij hulpprogramma's "Ontwikkelaarstools".
- Selecteer ten slotte Console.
Firefox
- Open de browser.
- Selecteer in het menu "Webontwikkelaar".
- Selecteer ten slotte "Webconsole".
Kant
- Open de browser.
- Selecteer in het menu "Ontwikkelaarstools".
- Selecteer ten slotte "Console".
Opera
- Open de browser.
- Selecteer in het menu "Ontwikkelaar".
- Selecteer in "Ontwikkelaar" de optie "Ontwikkelaarstools".
- Selecteer ten slotte "Console".
Safari
- Ga in het hoofdmenu naar Safari, Voorkeuren, Geavanceerd.
- Vink "Toon Ontwikkel-menu inschakelen in menubalk" aan.
- Wanneer de nieuwe optie "Ontwikkelen" in het menu verschijnt:
Kies "Show Error Console".
Wist u?
Debuggen is het proces van het testen, vinden en verminderen van bugs (fouten) in computerprogramma's.
De eerste bekende computerbug was een echte bug (een insect) die vastzat in de elektronica.