JavaScript
Debugging

breekpunten

Breekpunten pauzeren uw programma zodra de uitvoering een bepaald punt bereikt. U kunt dan regel voor regel door het programma bladeren, de uitvoering ervan observeren en de inhoud van uw variabelen inspecteren.

Er zijn drie manieren om breekpunten te maken.

1. Van code, met behulp van de debugger; uitspraak.
2. Vanuit de browser met behulp van de ontwikkelaarstools.
3. Van een Integrated Development Environment (IDE).

Debugger Statement

U kunt een debugger; verklaring overal in uw JavaScript-code. Zodra de JS-interpreter die regel bereikt, stopt deze de scriptuitvoering, zodat u variabelen kunt inspecteren en uw code kunt doorlopen.

Hulpmiddelen voor ontwikkelaars

De tweede optie is om een breekpunt rechtstreeks in de code toe te voegen vanuit de Developer Tools van de browser.

De ontwikkelaarstools openen

Chrome of Firefox

1. Druk op F12 om Developer Tools te openen
2. Schakel naar het tabblad Bronnen (Chrome) of het tabblad Debugger (Firefox)
3. Druk op Ctrl + P en typ de naam van uw JavaScript-bestand
4. Druk op Enter om het te openen.

Internet Explorer of Edge

1. Druk op F12 om Developer Tools te openen
2. Schakel naar het tabblad Debugger.
3. Gebruik het mappictogram in de linkerbovenhoek van het venster om een bestandsselectievenster te openen; u kunt uw JavaScript-bestand daar vinden.

Safari

1. Druk op Command + Option + C om Developer Tools te openen
2. Ga naar het tabblad Bronnen
3. Open de map "Scripts" in het linkerdeelvenster
4. Selecteer uw JavaScript-bestand.

Een breekpunt toevoegen vanuit de ontwikkelaarstools

Nadat u uw JavaScript-bestand hebt geopend in Developer Tools, kunt u op een regelnummer klikken om een breekpunt te plaatsen. De volgende keer dat uw programma wordt uitgevoerd, wordt het daar gepauzeerd.

Opmerking over geminimaliseerde bronnen: als uw bron geminimaliseerd is, kunt u deze vrij afdrukken (converteren naar leesbaar formaat). In Chrome gebeurt dit door op de knop {} in de rechteronderhoek van de broncodeviewer te klikken.

Ides

Visual Studio Code (VSC)

VSC heeft ingebouwde ondersteuning voor het opsporen van fouten in JavaScript.

1. Klik op de knop Foutopsporing aan de linkerkant of Ctrl + Shift + D
2. Maak een launch.json ( launch.json ) als u dit nog niet hebt gedaan door op het tandwielpictogram te drukken.
3. Voer de code vanuit VSC uit door op de groene afspeelknop te drukken of druk op F5 .

Een breekpunt toevoegen in VSC

Klik naast het regelnummer in uw JavaScript-bronbestand om een breekpunt toe te voegen (dit wordt rood gemarkeerd). Klik nogmaals op de rode cirkel om het breekpunt te verwijderen.

Tip: je kunt ook de voorwaardelijke breekpunten gebruiken in de dev-tools van de browser. Deze helpen bij het overslaan van onnodige onderbrekingen in de uitvoering. Voorbeeld scenario: u wilt een variabele in een lus te onderzoeken precies op 5 ^e iteratie.

Code doorlopen

Nadat u de uitvoering op een breekpunt hebt onderbroken, wilt u de uitvoering mogelijk regel voor regel volgen om te observeren wat er gebeurt. Open de ontwikkelaarstools van uw browser en zoek de pictogrammen voor uitvoeringsbeheer. (In dit voorbeeld worden de pictogrammen in Google Chrome gebruikt, maar ze zijn vergelijkbaar in andere browsers.)

Hervatten: uitvoering onderbreken. Shorcut: F8 (Chrome, Firefox)

Stap over: voer de volgende coderegel uit. Als die regel een functieaanroep bevat, voert u de hele functie uit en gaat u naar de volgende regel in plaats van te springen naar waar de functie is gedefinieerd. Snelkoppeling: F10 (Chrome, Firefox, IE / Edge), F6 (Safari)

Stap in: voer de volgende regel code uit. Als die regel een functieaanroep bevat, spring dan in de functie en pauzeer daar. Snelkoppeling: F11 (Chrome, Firefox, IE / Edge), F7 (Safari)

Stap uit: voer de rest van de huidige functie uit, spring terug naar waar de functie werd genoemd en pauzeer bij de volgende instructie daar. Snelkoppeling: Shift + F11 (Chrome, Firefox, IE / Edge), F8 (Safari)

Gebruik deze in combinatie met de Call Stack , die u zal vertellen in welke functie u zich momenteel bevindt, welke functie die functie wordt genoemd, enzovoort.

Raadpleeg de gids van Google over "De code doorlopen" voor meer informatie en advies.

Links naar documentatie van de sneltoets van de browser:

• Chrome
• Firefox
• D.W.Z
• Rand
• Safari

Uitvoering automatisch onderbreken

In Google Chrome kunt u de uitvoering pauzeren zonder breekpunten te plaatsen.

Pauzeren bij uitzondering: terwijl deze knop is ingeschakeld en het programma een onverwerkte uitzondering krijgt, pauzeert het programma alsof het een breekpunt heeft bereikt. De knop bevindt zich in de buurt van Execution Controls en is handig voor het vinden van fouten.

U kunt de uitvoering ook onderbreken wanneer een HTML-tag (DOM-knooppunt) wordt gewijzigd of wanneer de kenmerken ervan worden gewijzigd. Klik hiervoor met de rechtermuisknop op het DOM-knooppunt op het tabblad Elementen en selecteer "Break on ...".

Interactieve variabelen van de tolk

Merk op dat deze alleen werken in de ontwikkeltools van bepaalde browsers.

$_ geeft u de waarde van de expressie die het laatst is geëvalueerd.

"foo"             // "foo"
$_                // "foo"

$0 verwijst naar het DOM-element dat momenteel is geselecteerd in de Inspector. Dus als <div id="foo"> is gemarkeerd:

$0                      // <div id="foo">
$0.getAttribute('id')   // "foo"

$1 verwijst naar het eerder geselecteerde element, $2 naar het eerder geselecteerde element, enzovoort voor $3 en $4 .

Gebruik $$(selector) om een verzameling elementen te krijgen die overeenkomen met een CSS-selector. Dit is in wezen een snelkoppeling voor document.querySelectorAll .

var images = $$('img');  // Returns an array or a nodelist of all matching elements

¹ _{alias voor document.getElementById of document.querySelector}

Elementeninspecteur

Klik op de Selecteer een element op de pagina om het te inspecteren knop in de linkerbovenhoek van het tabblad Elementen in Chrome of het tabblad Inspector in Firefox, beschikbaar via Developer Tools, en vervolgens klikken op een element van de pagina markeert het element en wijst het toe aan de $0 variabel .

Elements Inspector kan op verschillende manieren worden gebruikt, bijvoorbeeld:

1. U kunt controleren of uw JS DOM manipuleert zoals u verwacht,
2. U kunt gemakkelijker uw CSS debuggen wanneer u ziet welke regels het element beïnvloeden
   (Tabblad Stijlen in Chrome)
3. Je kunt spelen met CSS en HTML zonder de pagina opnieuw te laden.

Chrome onthoudt ook de laatste 5 selecties op het tabblad Elementen. $0 is de huidige selectie, terwijl $1 de vorige selectie is. Je kunt tot $4 . Op die manier kunt u eenvoudig meerdere knooppunten debuggen zonder constant de selectie erop te schakelen.

U kunt meer lezen op Google Developers .

Met behulp van setters en getters om te bepalen wat een eigenschap heeft veranderd

Stel dat u een object als dit heeft:

var myObject = {
    name: 'Peter'
}

Later in je code probeer je toegang te krijgen tot myObject.name en krijg je George in plaats van Peter . Je begint je af te vragen wie het heeft veranderd en waar het precies is veranderd. Er is een manier om een debugger (of iets anders) op elke set te plaatsen (elke keer dat iemand myObject.name = 'something' ):

var myObject = {
    _name: 'Peter',
    set name(name){debugger;this._name=name},
    get name(){return this._name}
}

Merk op dat we de name hebben hernoemd naar _name en dat we een setter en een getter voor name gaan definiëren.

set name is de setter. Dat is een leuke plek waar je debugger , console.trace() of iets anders kunt plaatsen dat je nodig hebt om te debuggen. De setter zal de waarde voor naam instellen in _name . De getter (het gedeelte get name ) leest de waarde vanaf daar. Nu hebben we een volledig functioneel object met foutopsporingsfunctionaliteit.

Meestal is het object dat wordt gewijzigd echter niet onder onze controle. Gelukkig kunnen we setters en getters op bestaande objecten definiëren om ze te debuggen.

// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;

// Create setter and getter
Object.defineProperty(otherObject, "name", {
    set: function(name) {debugger;this._name = name},
    get: function() {return this._name}
});

Bekijk setters en getters op MDN voor meer informatie.

Browserondersteuning voor setters / getters:

Pauzeren wanneer een functie wordt aangeroepen

Voor benoemde (niet-anonieme) functies kunt u breken wanneer de functie wordt uitgevoerd.

debug(functionName);

De volgende keer dat de functionName functionName wordt uitgevoerd, stopt de debugger op de eerste regel.

Gebruik van de console

In veel omgevingen hebt u toegang tot een globaal console object dat enkele basismethoden bevat voor communicatie met standaarduitvoerapparaten. Meestal is dit de JavaScript-console van de browser (zie Chrome , Firefox , Safari en Edge voor meer informatie).

// At its simplest, you can 'log' a string
console.log("Hello, World!");

// You can also log any number of comma-separated values
console.log("Hello", "World!");

// You can also use string substitution
console.log("%s %s", "Hello", "World!");

// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);

U kunt verschillende consolemethoden gebruiken om uw uitvoer op verschillende manieren te markeren. Andere methoden zijn ook nuttig voor meer geavanceerde foutopsporing.

Zie het onderwerp Console voor meer documentatie, informatie over compatibiliteit en instructies voor het openen van de console van uw browser.

Opmerking: als u IE9 moet ondersteunen, verwijdert u console.log of wikkelt u de aanroepen ervan als volgt, omdat de console is gedefinieerd totdat de ontwikkelaarstools worden geopend:

if (console) { //IE9 workaround
    console.log("test");
}