denne vejledning lærer dig den grundlæggende arbejdsgang til fejlfinding af ethvert JavaScript-problem i DevTools. Læs videre, eller se videoversionen af denne tutorial nedenfor.

# Trin 1: Gengiv fejlen

at finde en række handlinger, der konsekvent gengiver en fejl, er altid det første skridt til fejlfinding.

1. Klik På Åbn Demo. Demoen åbnes i en ny fane.

   åben Demo

2. indtast 5 i tekstfeltet nummer 1.

3. indtast 1 i tekstfeltet nummer 2.

4. Klik på Tilføj nummer 1 og nummer 2. Etiketten under knappen siger 5 + 1 = 51. Resultatet skal være 6. Dette er den fejl, du vil rette.

   

   Figur 1. Resultatet af 5 + 1 er 51. Det skal være 6.

# Trin 2: Bliv fortrolig med Sources panel UI

DevTools giver mange forskellige værktøjer til forskellige opgaver, såsom ændring af CSS, profilering af sidebelastningsydelse og overvågning af netværksanmodninger. Panelet kilder er, hvor du debug JavaScript.

1. Åbn DevTools ved at trykke på Command+Option+i (Mac) eller Control+Shift+i (vinduer). Denne genvej åbner konsolpanelet.

   

   figur 2. Konsolpanelet

2. Klik på fanen kilder.

   

   figur 3. Kildepanelet

Sources panel UI har 3 dele:

figur 4. De 3 dele af panelet kilder UI

1. Filnavigatorruden. Hver fil, som siden anmoder om, er angivet her.
2. Kodeditorruden. Når du har valgt en fil i Filnavigatorruden, vises indholdet af den pågældende fil her.
3. JavaScript Debugging rude. Forskellige værktøjer til inspektion af sidens JavaScript. Hvis dit DevTools-vindue er bredt, vises denne rude til højre for ruden kodeditor.

# Trin 3: sæt koden på Pause med et breakpoint

en almindelig metode til fejlfinding af et problem som dette er at indsætte en masse console.log() udsagn i koden for at inspicere værdier, når scriptet udføres. Eksempel:

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å arbejdet gjort, men breakpoints kan få det gjort hurtigere. Et breakpoint giver dig mulighed for at sætte din kode på pause midt i dens udførelse og undersøge alle værdier på det tidspunkt. Breakpoints har et par fordele i forhold til console.log() – metoden:

• med console.log() skal du manuelt åbne kildekoden, finde den relevante kode, indsætte console.log() – udsagnene og derefter genindlæse siden for at se meddelelserne i konsollen. Med breakpoints kan du holde pause på den relevante kode uden selv at vide, hvordan koden er struktureret.
• i dine console.log() udsagn skal du eksplicit angive hver værdi, du vil inspicere. Med breakpoints viser DevTools dig værdierne for alle variabler på det tidspunkt. Nogle gange er der variabler, der påvirker din kode, som du ikke engang er opmærksom på.

kort sagt kan breakpoints hjælpe dig med at finde og rette fejl hurtigere end console.log() – metoden.

hvis du tager et skridt tilbage og tænker over, hvordan appen fungerer, kan du gætte, at den forkerte sum (5 + 1 = 51) beregnes i click begivenhedslytteren, der er knyttet til knappen Tilføj nummer 1 og nummer 2. Derfor vil du sandsynligvis sætte koden på pause omkring det tidspunkt, hvor lytteren click udfører. Breakpoints for begivenhedslyttere giver dig mulighed for at gøre netop det:

1. klik på breakpoints for Hændelseslytter i ruden JavaScript-Fejlfinding for at udvide sektionen. DevTools afslører en liste over udvidelige begivenhedskategorier, såsom Animation og Udklipsholder.

2. klik på Udvid ud for kategorien Musehændelse . DevTools afslører en liste over musehændelser, f.eks. Hver begivenhed har et afkrydsningsfelt ved siden af.

3. Marker afkrydsningsfeltet klik. DevTools er nu indstillet til automatisk pause, når en click event listener udfører.

   

   figur 5. Afkrydsningsfeltet klik er aktiveret

4. tilbage på demoen skal du klikke på Tilføj nummer 1 og nummer 2 igen. DevTools sætter demoen på pause og fremhæver en linje kode i panelet kilder. DevTools bør sættes på pause på denne linje kode:

   function onClick() {

   hvis du er sat på pause på en anden kodelinje, skal du trykke på Genoptag scriptudførelse , indtil du er sat på pause på den rigtige linje.

   Bemærk: Hvis du har sat en pause på en anden linje, har du en udvidelse, der registrerer en click begivenhedslytter på hver side, du besøger. Du blev sat på pause i udvidelsens click lytter. Hvis du bruger inkognitotilstand til at gennemse privat, som deaktiverer alle udvidelser, kan du se, at du holder pause på den rigtige kodelinje hver gang.

Event Listener Breakpoints er blot en af mange typer breakpoints, der er tilgængelige i DevTools. Det er værd at huske alle de forskellige typer, fordi hver type i sidste ende hjælper dig med at fejle forskellige scenarier så hurtigt som muligt. Se Pause din kode med Breakpoints for at lære, hvornår og hvordan du bruger hver type.

# Trin 4: trin gennem koden

en almindelig årsag til fejl er, når et script udføres i den forkerte rækkefølge. Stepping gennem din kode giver dig mulighed for at gå gennem din kodes udførelse, en linje ad gangen, og finde ud af præcis, hvor den udføres i en anden rækkefølge, end du forventede. Prøv det nu:

1. på panelet kilder i DevTools skal du klikke på trin til næste funktionsopkald for at gå gennem udførelsen af funktionen onClick(), en linje ad gangen. DevTools fremhæver følgende kodelinje:

   if (inputsAreEmpty()) {

2. Klik på trin over næste funktionsopkald . DevTools udfører inputsAreEmpty() uden at træde ind i det. Bemærk, hvordan DevTools springer et par linjer kode. Dette skyldes, at inputsAreEmpty() evalueret til falsk, så udsagnets kodeblok blev ikke udført.

det er den grundlæggende ide at træde gennem kode. Hvis du ser på koden i get-started.js, kan du se, at fejlen sandsynligvis er et sted i updateLabel() – funktionen. I stedet for at gå gennem hver kodelinje, kan du bruge en anden type breakpoint til at sætte koden på pause tættere på den sandsynlige placering af fejlen.

# Trin 5: Indstil et line-of-code breakpoint

Line-of-code breakpoints er den mest almindelige type breakpoint. Når du har en bestemt kodelinje, som du vil holde pause på, skal du bruge et line-of-code breakpoint:

1. kig på den sidste linje af kode i updateLabel():

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

2. til venstre for koden kan du se linjenummeret på denne bestemte kodelinje, som er 32. Klik på 32. DevTools sætter et blåt ikon oven på 32. Dette betyder, at der er et line-of-code breakpoint på denne linje. DevTools holder nu altid pause, før denne kodelinje udføres.

3. Klik på Genoptag script-udførelse . Scriptet fortsætter med at udføre, indtil det når linje 32. På linje 29, 30 og 31 udskriver DevTools værdierne addend1, addend2 og sum til højre for hver linjes semikolon.

   

   figur 6. DevTools pauser på line-of-code breakpoint på linje 32

# Trin 6: Kontroller variable værdier

værdierne på addend1, addend2 og sum ser mistænkelige ud. De er pakket ind i citater, hvilket betyder, at de er strenge. Dette er en god hypotese for at forklare årsagen til fejlen. Nu er det tid til at indsamle flere oplysninger. DevTools giver en masse værktøjer til at undersøge variable værdier.

# Metode 1: ruden omfang

når du er sat på pause på en kodelinje, viser ruden omfang dig, hvilke lokale og globale variabler der i øjeblikket er defineret sammen med værdien af hver variabel. Det viser også lukningsvariabler, når det er relevant. Dobbeltklik på en variabel værdi for at redigere den. Når du ikke er sat på pause på en kodelinje, er ruden rækkevidde tom.

Figur 7. Ruden omfang

# Metode 2: Urudtryk

fanen Urudtryk giver dig mulighed for at overvåge værdierne for variabler over tid. Som navnet antyder, er Urudtryk ikke kun begrænset til variabler. Du kan gemme ethvert gyldigt JavaScript-udtryk i et Urudtryk. Prøv det nu:

1. Klik på fanen ur.

2. Klik På Tilføj Udtryk .

3. skriv typeof sum.

4. Tryk På Enter. DevTools viser typeof sum: "string". Værdien til højre for tyktarmen er resultatet af dit Urudtryk.

   

   figur 8. Ruden Urudtryk (nederst til højre) efter oprettelse af typeof sum Urudtryk. Hvis dit DevTools-vindue er stort, er ruden Urudtryk til højre over ruden Hændelseslytter Breakpoints.

som Mistænkt vurderes sum som en streng, når det skal være et tal. Du har nu bekræftet, at dette er årsagen til fejlen.

# metode 3: Konsollen

ud over at se console.log() meddelelser kan du også bruge konsollen til at evaluere vilkårlige JavaScript-udsagn. Med hensyn til fejlfinding kan du bruge konsollen til at teste potentielle rettelser til fejl. Prøv det nu:

1. hvis du ikke har Konsolskuffen åben, skal du trykke på Escape for at åbne den. Det åbnes i bunden af dit DevTools-vindue.

2. skriv parseInt(addend1) + parseInt(addend2)i konsollen. Denne erklæring fungerer, fordi du er sat på pause på en kodelinje, hvor addend1 og addend2 er i omfang.

3. Tryk På Enter. DevTools evaluerer udsagnet og udskriver 6, hvilket er det resultat, du forventer, at demoen producerer.

   

   figur 9. Konsolskuffen, efter evaluering parseInt(addend1) + parseInt(addend2).

# Trin 7: Anvend en rettelse

du har fundet en rettelse til fejlen. Alt, hvad der er tilbage, er at prøve din løsning ved at redigere koden og køre demoen igen. Du behøver ikke at forlade DevTools for at anvende rettelsen. Du kan redigere JavaScript-kode direkte i DevTools UI. Prøv det nu:

1. Klik på Genoptag script-udførelse .
2. i kodeditoren skal du erstatte linje 31, var sum = addend1 + addend2, med var sum = parseInt(addend1) + parseInt(addend2).
3. tryk på Command + s (Mac) eller Control+S (Vinduer) for at gemme ændringen.
4. Klik på Deaktiver breakpoints . Det skifter blåt for at indikere, at det er aktivt. Mens dette er indstillet, ignorerer DevTools eventuelle breakpoints, du har angivet.
5. prøv demoen med forskellige værdier. Demoen beregner nu korrekt.

Tillykke! Du ved nu, hvordan du får mest muligt ud af Chrome DevTools, når du debugger JavaScript. De værktøjer og metoder, du lærte i denne tutorial, kan spare dig for utallige timer.

denne tutorial viste dig kun to måder at indstille breakpoints på. DevTools tilbyder mange andre måder, herunder:

• betingede breakpoints, der kun udløses, når den betingelse, du angiver, er sand.
• Breakpoints på fanget eller uncaught undtagelser.
• breakpoints, der udløses, når den ønskede URL matcher en substring, som du angiver.

se Pause din kode med Breakpoints for at lære, hvornår og hvordan du bruger hver type.

der er et par kode stepping kontroller, der ikke blev forklaret i denne tutorial. Se trin over kode for at lære mere.