Debug JavaScript

Kayce Basques

Sofia Emelianova

In deze zelfstudie leert u de basisworkflow voor het opsporen van fouten in JavaScript-problemen in DevTools. Lees verder of bekijk de videoversie van deze tutorial hieronder.

Stap 1: Reproduceer de bug

Het vinden van een reeks acties die een bug consequent reproduceren, is altijd de eerste stap bij het debuggen.

1. Open deze demo in een nieuw tabblad.
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 . Op het label onder de knop staat 5 + 1 = 51 . Het resultaat zou 6 moeten zijn. Dit is de bug die je gaat oplossen.

In dit voorbeeld is het resultaat van 5 + 1 51. Het zou 6 moeten zijn.

Stap 2: Maak uzelf vertrouwd met de gebruikersinterface van het Bronnenpaneel

DevTools biedt veel verschillende tools voor verschillende taken, zoals het wijzigen van CSS, het profileren van de laadprestaties van pagina's en het monitoren van netwerkverzoeken. In het Bronnenpaneel kunt u fouten in JavaScript opsporen.

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

   

2. Klik op het tabblad Bronnen .

   

De gebruikersinterface van het paneel Bronnen bestaat uit 3 delen:

1. Het deelvenster Bestandsnavigator . Elk bestand dat de pagina opvraagt, wordt hier vermeld.
2. Het deelvenster Code-editor . Nadat u een bestand in het deelvenster Bestandsnavigator hebt geselecteerd, wordt de inhoud van dat bestand hier weergegeven.
3. Het deelvenster JavaScript-foutopsporing . Verschillende tools voor het inspecteren van het JavaScript van de pagina. Als uw DevTools-venster breed is, wordt dit deelvenster rechts van het deelvenster Code-editor weergegeven.

Stap 3: Pauzeer de code met een breekpunt

Een gebruikelijke methode voor het debuggen van een probleem als dit is het invoegen van veel console.log() instructies 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 methode console.log() kan de klus klaren, maar breekpunten kunnen de klus sneller klaren. Met een breekpunt kunt u uw code midden in de uitvoering ervan pauzeren en alle waarden op dat moment bekijken. Breekpunten hebben een aantal voordelen ten opzichte van de console.log() methode:

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

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

Als u een stapje terug doet en nadenkt over hoe de app werkt, kunt u een goede inschatting maken dat de onjuiste som ( 5 + 1 = 51 ) wordt berekend in de click die is gekoppeld aan de knop Nummer 1 en Nummer 2 toevoegen . Daarom wilt u waarschijnlijk de code pauzeren rond de tijd dat de click wordt uitgevoerd. Met Event Listener Breakpoints kunt u precies dat doen:

1. Klik in het deelvenster Foutopsporing in JavaScript op Event Listener Breakpoints om de sectie uit te vouwen. DevTools onthult een lijst met uitbreidbare gebeurteniscategorieën, zoals Animatie en Klembord .
2. Klik naast de categorie Muisgebeurtenis op Uitvouwen . DevTools onthult een lijst met muisgebeurtenissen, zoals klikken en mousedown . Naast elke gebeurtenis staat een selectievakje.

3. Vink het selectievakje aan. DevTools is nu zo ingesteld dat deze automatisch pauzeert wanneer een click wordt uitgevoerd.

   

4. Terug in de demo klikt u nogmaals op Nummer 1 en Nummer 2 toevoegen . DevTools pauzeert de demo en markeert een regel code in het paneel Bronnen . 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 bent gepauzeerd, beschikt u over een browserextensie die een click registreert op elke pagina die u bezoekt. Je bent gepauzeerd in de click van de extensie. Als u de incognitomodus gebruikt om in private te browsen , 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 breekpunten die beschikbaar zijn in DevTools. Het is de moeite waard om alle verschillende typen uit je hoofd te leren, omdat elk type je uiteindelijk helpt om zo snel mogelijk verschillende scenario's te debuggen. Zie Uw code pauzeren met breekpunten om te leren wanneer en hoe u elk type kunt gebruiken.

Stap 4: Doorloop de code

Een veel voorkomende oorzaak van bugs is wanneer een script in de verkeerde volgorde wordt uitgevoerd. Door de code te doorlopen, kunt u regel voor regel door de uitvoering van uw code lopen en erachter komen waar deze precies wordt uitgevoerd, in een andere volgorde dan u had verwacht. Probeer het nu:

1. Klik in het paneel Bronnen van DevTools op Stap naar volgende functieaanroep om de uitvoering van de functie onClick() regel voor regel te doorlopen. DevTools markeert de volgende coderegel:

   if (inputsAreEmpty()) {
   

2. Klik op Stap over volgende functieaanroep . DevTools voert inputsAreEmpty() uit zonder erin te stappen. Merk op hoe DevTools een paar regels code overslaat. Dit komt omdat inputsAreEmpty() is geëvalueerd als false, waardoor het codeblok van de if instructie niet is uitgevoerd.

Dat is het basisidee van het doorlopen van code. Als je naar de code in get-started.js kijkt, kun je zien dat de bug waarschijnlijk ergens in de functie updateLabel() 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: Stel een breekpunt voor de coderegel in

Coderegelbreekpunten zijn het meest voorkomende type breekpunt. Wanneer u een specifieke coderegel heeft waarop u wilt pauzeren, gebruikt u een breekpunt voor de coderegel:

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

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

2. Links van de code ziet u het regelnummer van deze specifieke coderegel, namelijk 32 . Klik op 32 . DevTools plaatst een blauw pictogram bovenop 32 . Dit betekent dat er een coderegelbreekpunt op deze regel staat. DevTools pauzeert nu altijd voordat deze coderegel wordt uitgevoerd.

3. Klik op Scriptuitvoering hervatten . Het script gaat door met uitvoeren totdat het regel 32 bereikt. Op regels 29, 30 en 31 toont DevTools de waarden van addend1 , addend2 en sum inline naast hun declaraties.

In dit voorbeeld pauzeert DevTools op het coderegelbreekpunt op regel 32.

Stap 6: Controleer de variabelewaarden

De waarden van addend1 , addend2 en sum zien er verdacht uit. Ze staan ​​tussen aanhalingstekens, wat betekent dat het strings zijn. Dit is een goede hypothese om de oorzaak van de bug te verklaren. Nu is het tijd om meer informatie te verzamelen. DevTools biedt veel hulpmiddelen voor het onderzoeken van variabelewaarden.

Methode 1: Het bereikvenster

Wanneer u op een regel code pauzeert, ziet u in het deelvenster Bereik welke lokale en globale variabelen momenteel zijn gedefinieerd, samen met de waarde van elke variabele. Het toont ook afsluitingsvariabelen, indien van toepassing. Dubbelklik op een variabelewaarde om deze te bewerken. Als u niet op een regel code bent gepauzeerd, is het deelvenster Bereik leeg.

Methode 2: Bekijk expressies

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

1. Klik op het tabblad Kijken .
2. Klik op Expressie toevoegen .
3. Type typeof sum .
4. Druk op Enter . DevTools toont typeof sum: "string" . De waarde rechts van de dubbele punt is het resultaat van uw Watch-expressie.

De bovenstaande schermafbeelding toont het deelvenster Watch-expressie (rechtsonder) nadat het typeof sum watch-expressie is gemaakt. Als uw DevTools-venster groot is, bevindt het deelvenster Watch-expressie zich aan de rechterkant, boven het deelvenster Event Listener Breakpoints .

Zoals vermoed wordt sum geëvalueerd als een string, terwijl het een getal zou moeten zijn. U heeft nu bevestigd dat dit de oorzaak van de bug is.

Methode 3: De console

Naast het bekijken van console.log() berichten, kunt u de console ook gebruiken om willekeurige JavaScript-instructies te evalueren. Wat het debuggen betreft, kunt u de console gebruiken om mogelijke oplossingen voor bugs uit te testen. Probeer het nu:

1. Als u de consolelade niet open heeft, drukt u op Escape om deze te openen. Het wordt onderaan uw DevTools-venster geopend.
2. Typ parseInt(addend1) + parseInt(addend2) in de console. Deze instructie werkt omdat u bent gepauzeerd op een coderegel waar addend1 en addend2 binnen het bereik vallen.
3. Druk op Enter . DevTools evalueert de verklaring en drukt 6 af, wat het resultaat is dat u verwacht dat de demo zal opleveren.

De bovenstaande schermafbeelding toont de consolelade na evaluatie parseInt(addend1) + parseInt(addend2) .

Stap 7: Breng een oplossing aan

Je hebt een oplossing voor de bug gevonden. Het enige dat u nu hoeft te doen, is uw oplossing uitproberen door de code te bewerken en de demo opnieuw uit te voeren. U hoeft DevTools niet te verlaten om de oplossing toe te passen. U kunt JavaScript-code rechtstreeks in de DevTools-gebruikersinterface bewerken. Probeer het nu:

1. Klik op Scriptuitvoering hervatten .
2. Vervang in de Code-editor regel 31, var sum = addend1 + addend2 , 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 op Breekpunten deactiveren . De kleur verandert naar blauw om aan te geven dat deze actief is. Zolang dit is ingesteld, negeert DevTools alle breekpunten die u hebt ingesteld.
5. Probeer de demo met verschillende waarden. De demo berekent nu correct.

Let op: deze workflow past alleen een oplossing toe op de code die in uw browser wordt uitgevoerd. De code wordt niet opgelost voor alle gebruikers die uw pagina bezoeken. Om dat te doen, moet u de code op uw servers repareren. U kunt wel bestanden in DevTools bewerken en met Workspaces in uw bronnen opslaan .

Belangrijk punt: Vanaf Chrome-versie 105 kunt u een gepauzeerde functie live bewerken .

Volgende stappen

Gefeliciteerd! U weet nu hoe u Chrome DevTools optimaal kunt benutten bij het debuggen van JavaScript. De tools en methoden die u in deze tutorial hebt geleerd, kunnen u talloze uren besparen.

Deze tutorial liet je slechts twee manieren zien om breekpunten in te stellen. DevTools biedt vele andere manieren, waaronder:

• Voorwaardelijke breekpunten die alleen worden geactiveerd als de door u opgegeven voorwaarde waar is.
• Breekpunten voor gevangen of niet-afgevangen uitzonderingen.
• XHR-breekpunten die worden geactiveerd wanneer de aangevraagde URL overeenkomt met een subtekenreeks die u opgeeft.

Zie Uw code pauzeren met breekpunten om te leren wanneer en hoe u elk type kunt gebruiken.

Er zijn een aantal besturingselementen voor het stapsgewijs coderen van code die in deze zelfstudie niet zijn uitgelegd. Zie Over de regel code stappen voor meer informatie.