denna handledning lär dig det grundläggande arbetsflödet för felsökning av JavaScript-problem i DevTools. Läs vidare eller titta på videoversionen av denna handledning nedan.

# Steg 1: reproducera felet

att hitta en serie åtgärder som konsekvent reproducerar ett fel är alltid det första steget till felsökning.

1. Klicka På Öppna Demo. Demon öppnas i en ny flik.

   öppna Demo

2. ange 5 i textrutan nummer 1.

3. ange 1 i textrutan nummer 2.

4. klicka på Lägg till nummer 1 och nummer 2. Etiketten under knappen säger 5 + 1 = 51. Resultatet ska vara 6. Det här är felet du ska fixa.

   

   Figur 1. Resultatet av 5 + 1 är 51. Det borde vara 6.

# steg 2: bekanta dig med källpanelen UI

DevTools ger många olika verktyg för olika uppgifter, till exempel att ändra CSS, profilera sidbelastningsprestanda och övervaka nätverksförfrågningar. Källpanelen är där du felsöker JavaScript.

1. öppna DevTools genom att trycka på Kommando + Alternativ + i (Mac) eller kontroll+skift+i (Windows, Linux). Den här genvägen öppnar Konsolpanelen.

   

   Figur 2. Konsolpanelen

2. klicka på fliken källor.

   

   Figur 3. Panelen källor

Källpanelens användargränssnitt har 3 delar:

Figur 4. De 3 delarna av Källpanelens användargränssnitt

1. filnavigeringsfönstret. Varje fil som sidan begär listas här.
2. fönstret kodredigerare. När du har valt en fil i fönstret File Navigator visas innehållet i den filen här.
3. JavaScript-felsökningsfönstret. Olika verktyg för att inspektera sidans JavaScript. Om ditt DevTools-fönster är brett visas den här rutan till höger om Kodredigeringsfönstret.

# steg 3: pausa koden med en brytpunkt

en vanlig metod för felsökning av ett problem som detta är att infoga många console.log() – satser i koden för att inspektera värden när skriptet körs. Exempelvis:

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;
}

console.log() metoden kan få jobbet gjort, men brytpunkter kan få det gjort snabbare. En brytpunkt låter dig pausa din kod mitt i körningen och undersöka alla värden just nu. Brytpunkter har några fördelar jämfört med console.log() – metoden:

• med console.log() måste du manuellt öppna källkoden, hitta den relevanta koden, infoga console.log() – satserna och sedan ladda om sidan för att se meddelandena i konsolen. Med brytpunkter kan du pausa på relevant kod utan att ens veta hur koden är strukturerad.
• i dina console.log() – satser måste du uttryckligen ange varje värde som du vill inspektera. Med brytpunkter visar DevTools värdena för alla variabler just nu. Ibland finns det variabler som påverkar din kod som du inte ens är medveten om.

kort sagt, brytpunkter kan hjälpa dig att hitta och åtgärda fel snabbare än metoden console.log().

om du tar ett steg tillbaka och tänker på hur appen fungerar kan du göra en utbildad gissning att den felaktiga summan (5 + 1 = 51) beräknas i händelselyssnaren click som är associerad med knappen Lägg till nummer 1 och nummer 2. Därför vill du förmodligen pausa koden runt den tid som lyssnaren click kör. Händelselyssnare brytpunkter låter dig göra exakt det:

1. klicka på brytpunkter för Händelselyssnare i rutan JavaScript-Felsökning för att expandera avsnittet. DevTools avslöjar en lista över utbyggbara händelsekategorier, till exempel animering och Urklipp.

2. bredvid mush event-kategorin klickar du på Expand . DevTools avslöjar en lista över mushändelser, till exempel klick och mousedown. Varje händelse har en kryssruta bredvid den.

3. markera kryssrutan klicka. DevTools är nu inställd för att automatiskt pausa när någon click händelselyssnare körs.

   

   Figur 5. Kryssrutan Klicka är aktiverad

4. tillbaka på demo, klicka på Lägg till nummer 1 och nummer 2 igen. DevTools pausar demo och belyser en rad kod i panelen källor. DevTools bör pausas på denna kodrad:

   function onClick() {

   om du pausas på en annan kodrad trycker du på Resume Script Execution tills du pausas på rätt rad.

   Obs: Om du pausade på en annan rad, har du ett webbläsartillägg som registrerar en click händelse lyssnare på varje sida som du besöker. Du pausades i förlängningens click lyssnare. Om du använder inkognitoläge för att bläddra privat, vilket inaktiverar alla tillägg, kan du se att du pausar på rätt kodrad varje gång.

Händelse lyssnare brytpunkter är bara en av många typer av brytpunkter som finns i DevTools. Det är värt att memorera alla olika typer, eftersom varje typ i slutändan hjälper dig att felsöka olika scenarier så snabbt som möjligt. Se pausa koden med brytpunkter för att lära dig när och hur du använder varje typ.

# steg 4: Gå igenom koden

en vanlig orsak till fel är när ett skript körs i fel ordning. Genom att gå igenom din kod kan du gå igenom kodens körning, en rad i taget och ta reda på exakt var den körs i en annan ordning än du förväntade dig. Prova nu:

1. på källpanelen i DevTools klickar du på steg in i nästa funktionsanrop för att gå igenom exekveringen av funktionen onClick(), en rad i taget. DevTools belyser följande kodrad:

   if (inputsAreEmpty()) {

2. klicka på steg över nästa funktionsanrop . DevTools kör inputsAreEmpty() utan att gå in i den. Lägg märke till hur DevTools hoppar över några rader kod. Detta beror på att inputsAreEmpty() utvärderades till false, så if – satsen kodblock kördes inte.

det är den grundläggande tanken att gå igenom kod. Om du tittar på koden i get-started.js kan du se att felet troligen finns någonstans i funktionen updateLabel(). I stället för att gå igenom varje kodrad kan du använda en annan typ av Brytpunkt för att pausa koden närmare den troliga platsen för felet.

# Steg 5: Ange en radbrytpunkt

Radbrytpunkter är den vanligaste typen av Brytpunkt. När du har en specifik kodrad som du vill pausa på använder du en radbrytpunkt:

1. titta på den sista raden av kod i updateLabel():

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

2. till vänster om koden kan du se radnumret för den här kodraden, som är 32. Klicka på 32. DevTools sätter en blå ikon ovanpå 32. Det betyder att det finns en radbrytpunkt på den här raden. DevTools pausar nu alltid innan denna kodrad körs.

3. klicka på Fortsätt scriptkörning . Skriptet fortsätter att köras tills det når rad 32. På raderna 29, 30 och 31 skriver DevTools ut värdena addend1, addend2 och sum till höger om varje rads halvkolon.

   

   Figur 6. DevTools pausar på linje-av-kod Brytpunkt på rad 32

# steg 6: Kontrollera variabla värden

värdena för addend1, addend2 och sum ser misstänkta ut. De är inslagna i citat, vilket betyder att de är strängar. Detta är en bra hypotes för att förklara orsaken till felet. Nu är det dags att samla in mer information. DevTools ger många verktyg för att undersöka variabla värden.

# Metod 1: omfånget

när du pausas på en kodrad visar omfånget vilka lokala och globala variabler som för närvarande definieras, tillsammans med värdet för varje variabel. Det visar också stängningsvariabler, när det är tillämpligt. Dubbelklicka på ett variabelvärde för att redigera det. När du inte pausas på en kodrad är fönstret omfattning tomt.

Figur 7. Fönstret omfattning

# Metod 2: titta på uttryck

fliken titta på uttryck låter dig övervaka värdena för variabler över tiden. Som namnet antyder är Klockuttryck inte bara begränsade till variabler. Du kan lagra alla giltiga JavaScript-uttryck i ett Klockuttryck. Prova nu:

1. klicka på fliken klocka.

2. Klicka På Lägg Till Uttryck .

3. Typ typeof sum.

4. Tryck På Enter. DevTools visar typeof sum: "string". Värdet till höger om kolon är resultatet av ditt Klockuttryck.

   

   figur 8. Fönstret Klockuttryck (längst ner till höger), efter att du har skapat typeof sum Klockuttryck. Om ditt DevTools-fönster är stort är rutan Watch Expression till höger ovanför rutan Event Listener Breakpoints.

som misstänkt utvärderas sum som en sträng, när det ska vara ett tal. Du har nu bekräftat att detta är orsaken till felet.

# Metod 3: Konsolen

förutom att visa console.log() meddelanden kan du också använda konsolen för att utvärdera godtyckliga JavaScript-uttalanden. När det gäller felsökning kan du använda konsolen för att testa potentiella korrigeringar för buggar. Prova nu:

1. om du inte har Konsollådan öppen trycker du på Escape för att öppna den. Den öppnas längst ner i ditt DevTools-fönster.

2. skriv parseInt(addend1) + parseInt(addend2)i konsolen. Detta uttalande fungerar eftersom du är pausad på en kodrad där addend1 och addend2 är i omfattning.

3. Tryck På Enter. DevTools utvärderar uttalandet och skriver ut 6, vilket är resultatet du förväntar dig att demoen ska producera.

   

   Figur 9. Konsollådan, efter utvärdering parseInt(addend1) + parseInt(addend2).

# Steg 7: Applicera en fix

du har hittat en fix för felet. Allt som är kvar är att prova din fix genom att redigera koden och åter köra demo. Du behöver inte lämna DevTools för att tillämpa fixen. Du kan redigera JavaScript-kod direkt i DevTools UI. Prova nu:

1. klicka på Fortsätt scriptkörning .
2. i kodredigeraren, ersätt rad 31, var sum = addend1 + addend2, med var sum = parseInt(addend1) + parseInt(addend2).
3. tryck på Command+S (Mac) eller Control+S (Windows, Linux) för att spara ändringen.
4. klicka på Inaktivera brytpunkter. Det ändras blått för att indikera att det är aktivt. Medan detta är inställt ignorerar DevTools alla brytpunkter du har ställt in.
5. prova demo med olika värden. Demon beräknar nu korrekt.

Grattis! Du vet nu hur du får ut det mesta av Chrome DevTools när du felsöker JavaScript. De verktyg och metoder du lärde dig i denna handledning kan spara otaliga timmar.

denna handledning visade dig bara två sätt att ställa in brytpunkter. DevTools erbjuder många andra sätt, inklusive:

• villkorliga brytpunkter som bara utlöses när villkoret som du anger är sant.
• brytpunkter på fångade eller ofångade undantag.
• XHR-brytpunkter som utlöses när den begärda webbadressen matchar en delsträng som du anger.

se pausa din kod med brytpunkter för att lära dig när och hur du använder varje typ.

det finns ett par kodstegskontroller som inte förklarades i denna handledning. Se steg över kodrad för att lära dig mer.