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.

Reproduceer de fout

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 vak Nummer 1 in.
3. Voer 1 in het vak 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.

Maak uzelf vertrouwd met de gebruikersinterface van het paneel Bronnen

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 en navigeer naar het paneel Bronnen .

   

Het paneel Bronnen bestaat uit drie secties:

1. Het tabblad Pagina met de bestandsboom. Elk bestand dat de pagina opvraagt, wordt hier vermeld.
2. Het gedeelte Code-editor . Nadat u een bestand op het tabblad Pagina hebt geselecteerd, wordt hier de inhoud van dat bestand weergegeven.

3. Het Debugger- gedeelte. Verschillende tools voor het inspecteren van het JavaScript van de pagina.

   Als uw DevTools-venster breed is, bevindt de Debugger zich standaard rechts van de Code-editor . In dit geval worden de tabbladen Scope en Watch samengevoegd met Breakpoints , Call stack en andere als samenvouwbare secties.

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 de sectie Debugger 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 arrow_right Uitbreiden . 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 coderegel bent gepauzeerd, drukt u op Hervatten 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 te verkennen, omdat elk type u uiteindelijk helpt verschillende scenario's zo snel mogelijk te debuggen. Zie Uw code pauzeren met breekpunten om te leren wanneer en hoe u elk type kunt gebruiken.

Stap door de code

Een veel voorkomende oorzaak van bugs is wanneer een script in de verkeerde volgorde wordt uitgevoerd. Als u door uw code loopt, 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 step_into Step into next function call om de uitvoering van de functie onClick() regel voor regel te doorlopen. DevTools markeert de volgende coderegel:

   if (inputsAreEmpty()) {
   

2. Klik op step_over Stap over de 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.

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 hervatten 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.

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: Inspecteer de scoop

Wanneer u op een regel code bent gepauzeerd, ziet u op het tabblad Bereik welke lokale en globale variabelen op dit punt in de uitvoering zijn gedefinieerd, samen met de waarde van elke variabele. Het toont ook afsluitingsvariabelen, indien van toepassing. Als u niet op een regel code bent gepauzeerd, is het tabblad Bereik leeg.

Dubbelklik op een variabelewaarde om deze te bewerken.

Opmerking: Afhankelijk van uw lay-outvoorkeur en de breedte van uw DevTools-venster, kan het tabblad Scope verschijnen als een inklapbare sectie, samen met Breakpoints en Call stack .

Methode 2: Bekijk uitdrukkingen

Op het tabblad Controleren kunt u de waarden van variabelen in de loop van de tijd volgen. Watch beperkt zich niet alleen tot variabelen. U kunt elke geldige JavaScript-expressie opslaan op het tabblad Bekijken .

Opmerking: Afhankelijk van uw lay-outvoorkeur en de breedte van uw DevTools-venster, kan het tabblad Kijken verschijnen als een inklapbare sectie, samen met Breakpoints en Call stack .

Probeer het nu:

1. Klik op het tabblad Kijken .
2. Klik op toevoegen Controle-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 expressie.

Deze schermafbeelding toont het tabblad Watch (rechtsonder) na het maken van het typeof sum watch-expressie.

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.

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

Pas een oplossing toe

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 hervatten 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 label_off 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 hersteld voor alle gebruikers die uw pagina bezoeken. Om dat te doen, moet u de code op uw servers repareren. Wel kunt u bestanden in DevTools bewerken en met Workspaces in uw bronnen opslaan .

Tip: Vanaf Chrome versie 105 kun je een gepauzeerde functie live bewerken .

Volgende stappen

Succes: 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.