deze tutorial leert u de basisworkflow voor het debuggen van een JavaScript-probleem in DevTools. Lees verder, of bekijk de video versie van deze tutorial, hieronder.

# Stap 1: reproduceer de bug

het vinden van een reeks acties die consistent een bug reproduceert is altijd de eerste stap naar debuggen.

1. Klik Op Demo Openen. De demo wordt geopend in een nieuw tabblad.

   Demo openen

2. voer 5 in het tekstvak nummer 1 in.

3. voer 1 in het tekstvak nummer 2 in.

4. klik op nummer 1 en nummer 2 Toevoegen. Het label onder de knop zegt 5 + 1 = 51. Het resultaat moet 6zijn. Dit is de bug die je gaat repareren.

   

   figuur 1. Het resultaat van 5 + 1 is 51. Het zou zes moeten zijn.

# Stap 2: Maak kennis met het Bronnenpaneel UI

DevTools biedt veel verschillende tools voor verschillende taken, zoals het wijzigen van CSS, het profileren van paginaladprestaties en het monitoren van netwerkaanvragen. Het Bronnenpaneel is waar u JavaScript debuggen.

1. Open DevTools door op Command+Option+I (Mac) of Control+Shift+I (Windows, Linux) te drukken. Deze snelkoppeling opent het Consolepaneel.

   

   Figuur 2. Het Consolepaneel

2. klik op het tabblad Bronnen.

   

   Figuur 3. Het Bronnenpaneel

de gebruikersinterface van het Bronnenpaneel bestaat uit 3 delen:

Figuur 4. De 3 delen van het Bronnenpaneel UI

1. het bestandsnavigatiepaneel. Elk bestand dat de pagina vraagt wordt hier weergegeven.
2. het codebewerker-Paneel. Na het selecteren van een bestand in het deelvenster File Navigator, wordt de inhoud van dat bestand hier weergegeven.
3. het JavaScript-Debugvenster. Verschillende tools voor het inspecteren van JavaScript van de pagina. Als uw DevTools-venster breed is, wordt dit venster rechts van het codebewerker-venster weergegeven.

# Stap 3: pauzeer de code met een breekpunt

een veelgebruikte methode voor het debuggen van een probleem als dit is het invoegen van veel console.log() statements in de code, om waarden te inspecteren terwijl het script wordt uitgevoerd. Bijvoorbeeld:

function updateLabel() {
var addend1 = getNumber1();
console.log('addend1:', addend1);
var addend2 = getNumber2();
console.log('addend2:', addend2);
var sum = addend1 + addend2;
console.log('sum:', sum);
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

de console.log() methode kan de klus klaren, maar breekpunten kunnen het sneller doen. Een breekpunt laat je je code pauzeren in het midden van de uitvoering, en onderzoekt alle waarden op dat moment in de tijd. Breekpunten hebben enkele voordelen ten opzichte van de console.log() methode:

• met console.log() moet u handmatig de broncode openen, de relevante code vinden, de console.log() – statements invoegen en de pagina opnieuw laden om de berichten in de Console te zien. Met breekpunten kunt u pauzeren op de relevante code zonder zelfs maar te weten hoe de code is gestructureerd.
• in uw console.log() statements moet u expliciet elke waarde specificeren die u wilt inspecteren. Met breekpunten toont DevTools je de waarden van alle variabelen op dat moment. Soms zijn er variabelen die je code beïnvloeden waarvan je je niet eens bewust bent.

kortom, breekpunten kunnen u helpen bugs sneller te vinden en op te lossen dan de console.log() methode.

als u een stap terug doet en nadenkt over hoe de app werkt, kunt u een gefundeerde schatting maken dat de onjuiste Som (5 + 1 = 51) wordt berekend in de click evenementluisteraar die is gekoppeld aan de knop Nummer 1 en nummer 2 Toevoegen. Daarom wilt u de code waarschijnlijk pauzeren rond de tijd dat de click luisteraar uitvoert. Event Listener Breakpoints laten je precies dat doen:

1. klik in het deelvenster JavaScript-foutopsporing op breekpunten voor Gebeurtenisluisteraar om de sectie uit te vouwen. DevTools onthult een lijst van uitbreidbare event categorieën, zoals animatie en Klembord.

2. klik naast de categorie muisgebeurtenissen op uitvouwen . DevTools onthult een lijst met muisgebeurtenissen, zoals click en mousedown. Elk evenement heeft een selectievakje ernaast.

3. Schakel het selectievakje klik in. DevTools is nu ingesteld om automatisch te pauzeren wanneer een click event listener wordt uitgevoerd.

   

   Figuur 5. Het selectievakje klikken is ingeschakeld

4. terug op de demo, klik op Toevoegen nummer 1 en nummer 2 opnieuw. DevTools pauzeert de demo en benadrukt een regel code in het Bronnenpaneel. DevTools moet worden gepauzeerd op deze regel code:

   function onClick() {

   als u op een andere regel code bent gepauzeerd, drukt u op scriptuitvoering hervatten totdat u op de juiste regel bent gepauzeerd.

   Opmerking: Als u op een andere regel pauzeerde, heeft u een browserextensie die een click evenementluisteraar registreert op elke pagina die u bezoekt. U werd gepauzeerd in de click luisteraar van de extensie. Als u de incognitomodus gebruikt om privé te bladeren, waardoor alle extensies worden uitgeschakeld, kunt u zien dat u elke keer op de juiste regel code pauzeert.

Event Listener Breakpoints zijn slechts een van de vele soorten breakpoints die beschikbaar zijn in DevTools. Het is de moeite waard het onthouden van alle verschillende types, omdat elk type uiteindelijk helpt u debug verschillende scenario ‘ s zo snel mogelijk. Zie je code pauzeren met breekpunten om te leren wanneer en hoe je elk type moet gebruiken.

# Stap 4: stap door de code

een veel voorkomende oorzaak van bugs is wanneer een script in de verkeerde volgorde uitvoert. Door je code te doorlopen kun je de uitvoering van je code doorlopen, regel voor regel, en uitzoeken waar het precies wordt uitgevoerd in een andere volgorde dan je had verwacht. Probeer het nu:

1. klik op het paneel bronnen van DevTools op stap naar volgende functie aanroep om de uitvoering van de functie onClick() regel voor regel te doorlopen. DevTools benadrukt de volgende regel code:

   if (inputsAreEmpty()) {

2. klik op stap over volgende functie aanroep . DevTools voert inputsAreEmpty() uit zonder erin te stappen. Merk op hoe DevTools een paar regels code overslaat. Dit komt omdat inputsAreEmpty() geëvalueerd is naar false, dus het code blok van het if statement is niet uitgevoerd.

dat is het basisidee om door de code te stappen. Als je naar de code in get-started.js kijkt, kun je zien dat de bug waarschijnlijk ergens in de updateLabel() functie zit. In plaats van elke regel code te doorlopen, kunt u een ander type breekpunt gebruiken om de code dichter bij de waarschijnlijke locatie van de bug te pauzeren.

# Stap 5: Een regel-of-code breekpunt instellen

regel-of-code breekpunten zijn het meest voorkomende type breekpunt. Wanneer u een specifieke regel code hebt die u wilt pauzeren, gebruik dan een regel-of-code breekpunt:

1. Kijk naar de laatste regel code in updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

2. links van de code zie je het regelnummer van deze specifieke code, die 32 is. Klik op 32. DevTools zet een blauw pictogram op de top van 32. Dit betekent dat er een regel-van-code breekpunt op deze regel. DevTools pauzeert nu altijd voordat deze regel code wordt uitgevoerd.

3. klik op scriptuitvoering hervatten . Het script blijft uitvoeren totdat het regel 32 bereikt. Op de regels 29, 30 en 31 drukt DevTools de waarden addend1, addend2 en sum af aan de rechterkant van de puntkomma van elke regel.

   

   Figuur 6. DevTools pauzeert op het regel-van-code breekpunt op Regel 32

# Stap 6: Controleer variabele waarden

de waarden van addend1, addend2 en sum zien er verdacht uit. Ze zijn gewikkeld in aanhalingstekens, wat betekent dat het touwtjes zijn. Dit is een goede hypothese voor het verklaren van de oorzaak van de bug. Nu is het tijd om meer informatie te verzamelen. DevTools biedt veel tools voor het onderzoeken van variabele waarden.

# Methode 1: Het Scope-Paneel

wanneer u wordt gepauzeerd op een regel code, toont het Scope-Paneel u welke lokale en globale variabelen momenteel zijn gedefinieerd, samen met de waarde van elke variabele. Het toont ook sluitingsvariabelen, indien van toepassing. Dubbelklik op een variabele om deze te bewerken. Wanneer u niet op een regel code bent gepauzeerd, is het Scope-Paneel leeg.

Figuur 7. Het Scope Paneel

# Methode 2: Bekijk expressies

op het tabblad bekijk expressies kunt u de waarden van variabelen in de tijd controleren. Zoals de naam al aangeeft, kijken expressies zijn niet alleen beperkt tot variabelen. U kunt elke geldige JavaScript-expressie opslaan in een Watch-expressie. Probeer het nu:

1. klik op het tabblad Watch.

2. Klik Op Expressie Toevoegen .

3. Type typeof sum.

4. Druk Op Enter. DevTools toont typeof sum: "string". De waarde aan de rechterkant van de dikke darm is het resultaat van uw horloge expressie.

   

   Figuur 8. Het deelvenster Watch Expression (rechtsonder), na het aanmaken van de typeof sum Watch Expression. Als uw DevTools-venster groot is, bevindt het deelvenster Watch Expression zich aan de rechterkant, boven het deelvenster Breakpoints van de Event Listener.

zoals vermoed wordt, wordt sum geëvalueerd als een tekenreeks, terwijl het een getal moet zijn. Je hebt nu bevestigd dat dit de oorzaak is van de bug.

# Methode 3: De Console

naast het bekijken van console.log() berichten, kunt u de Console ook gebruiken om willekeurige Javascript-statements te evalueren. In termen van foutopsporing, kunt u de Console gebruiken om mogelijke oplossingen voor bugs te testen. Probeer het nu:

1. als je de console lade NIET open hebt, druk je op Escape om hem te openen. Het opent aan de onderkant van uw DevTools venster.

2. typ parseInt(addend1) + parseInt(addend2)in de Console. Dit statement werkt omdat u gepauzeerd bent op een regel code waar addend1 en addend2 in scope staan.

3. Druk Op Enter. DevTools evalueert het statement en drukt 6 af, wat het resultaat is dat u verwacht van de demo.

   

   figuur 9. De Consolelade, na evaluatie parseInt(addend1) + parseInt(addend2).

# Stap 7: pas een fix

toe U hebt een fix voor de bug gevonden. Alles wat er nog over is om je fix uit te proberen door de code te bewerken en de demo opnieuw uit te voeren. Je hoeft DevTools niet te verlaten om de fix toe te passen. U kunt JavaScript code direct bewerken binnen de DevTools UI. Probeer het nu:

1. klik op scriptuitvoering hervatten .
2. in de codebewerker regel 31, var sum = addend1 + addend2, vervangen door var sum = parseInt(addend1) + parseInt(addend2).
3. druk op Command + S (Mac) of Control+S (Windows, Linux) om uw wijziging op te slaan.
4. klik breekpunten deactiveren. Het verandert blauw om aan te geven dat het actief is. Terwijl dit is ingesteld, negeert DevTools alle breekpunten die je hebt ingesteld.
5. probeer de demo uit met verschillende waarden. De demo berekent nu correct.

Gefeliciteerd! Je weet nu hoe je het meeste uit Chrome DevTools te maken bij het debuggen van JavaScript. De tools en methoden die u in deze zelfstudie hebt geleerd, kunnen u talloze uren besparen.

deze tutorial toonde u slechts twee manieren om breekpunten in te stellen. DevTools biedt vele andere manieren, waaronder:

• voorwaardelijke breekpunten die alleen worden geactiveerd wanneer de voorwaarde die u opgeeft waar is.
• breekpunten bij gevangen of niet-gevangen uitzonderingen.
• XHR-breekpunten die worden geactiveerd wanneer de gevraagde URL overeenkomt met een door u opgegeven substring.

zie uw Code pauzeren met breekpunten om te leren wanneer en hoe u elk type moet gebruiken.

er zijn een paar besturingselementen voor het stapelen van code die niet zijn uitgelegd in deze tutorial. Zie stap over regel code voor meer informatie.