denne opplæringen lærer deg den grunnleggende arbeidsflyten for feilsøking Av JavaScript-problem I DevTools. Les videre, eller se video versjon av denne opplæringen, under.

# Trinn 1: Gjengi feilen

Å Finne en rekke handlinger som konsekvent gjengir en feil, er alltid det første skrittet for å feilsøke.

1. Klikk Åpne Demo. Demoen åpnes i en ny fane.

   Åpne Demo

2. Skriv inn 5 i Tekstboksen nummer 1.

3. Skriv inn 1 i tekstboksen nummer 2.

4. Klikk På Legg Til nummer 1 Og Nummer 2. Etiketten under knappen sier 5 + 1 = 51. Resultatet skal være 6. Dette er feilen du skal fikse.

   

   Figur 1. Resultatet av 5 + 1 er 51. Det bør være 6.

# Trinn 2: Bli kjent Med Sources panel UI

DevTools gir mange forskjellige verktøy for forskjellige oppgaver, for eksempel endring AV CSS, profilering av sidebelastningsytelse og overvåking av nettverksforespørsler. Kilder-panelet er der Du feilsøker JavaScript.

1. Åpne DevTools ved å trykke Command + Option + I (Mac) eller Control + Shift + I (Windows, Linux). Denne snarveien åpner Konsollpanelet.

   

   Figur 2. Konsollpanelet

2. Klikk Kategorien Kilder.

   

   Figur 3. Kilder-panelet

Kilder panel UI har 3 deler:

Figur 4. DE 3 delene Av Kilder-panelet UI

1. filnavigator-ruten. Hver fil som siden ber om er oppført her.
2. Koderedigeringsruten. Når du har valgt en fil i Ruten Filnavigator, vises innholdet i filen her.
3. JavaScript-Feilsøkingsruten. Ulike verktøy for inspeksjon av Sidens JavaScript. Hvis DevTools-vinduet er bredt, vises denne ruten til høyre for Koderedigeringsruten.

# Trinn 3: Pause koden med et stoppunkt

en vanlig metode for å feilsøke et problem som dette er å sette inn mange console.log() setninger i koden, for å inspisere verdier som skriptet utfører. Eksempelvis:

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å jobben gjort, men breakpoints kan få det gjort raskere. Et stoppunkt lar deg pause koden din midt i utførelsen, og undersøke alle verdier i det øyeblikket. Avbruddspunkter har noen fordeler i forhold til console.log() – metoden:

• med console.log() må du manuelt åpne kildekoden, finne den aktuelle koden, sette inn console.log() – setningene, og last deretter siden på nytt for å se meldingene i Konsollen. Med stoppunkter kan du pause på den aktuelle koden uten å vite hvordan koden er strukturert.
• i console.log() – setningene må du eksplisitt angi hver verdi du vil inspisere. Med stoppunkter Viser DevTools deg verdiene av alle variabler på det tidspunktet. Noen ganger er det variabler som påvirker koden din som du ikke engang er klar over.

kort sagt kan avbruddspunkter hjelpe deg med å finne og fikse feil raskere enn console.log() – metoden.

hvis du tar et skritt tilbake og tenker på hvordan appen fungerer, kan du gjette at feil sum (5 + 1 = 51) blir beregnet i hendelseslytteren click som er knyttet Til Knappen Legg Til nummer 1 og nummer 2. Derfor vil du sannsynligvis pause koden rundt den tiden som lytteren click utfører. Event Listener Breakpoints lar deg gjøre akkurat det:

1. klikk Avbruddspunkter For Hendelseslytter i JavaScript-Feilsøkingsruten for å utvide delen. DevTools avslører en liste over utvidbare hendelseskategorier, For Eksempel Animasjon og Utklippstavle.

2. ved siden Av musehendelseskategorien klikker Du Utvid . DevTools avslører en liste over mus hendelser, for eksempel klikk og mousedown. Hver hendelse har en avkrysningsboks ved siden av den.

3. Merk av for klikk. DevTools er nå satt opp til å automatisk pause når noen click event lytteren utfører.

   

   Figur 5. Avmerkingsboksen klikk er aktivert

4. Tilbake på demoen, klikk Legg Til Nummer 1 Og Nummer 2 igjen. DevTools pauser demoen og fremhever en linje med kode i Kilder panel. DevTools bør pause på denne linjen med kode:

   function onClick() {

   hvis du er pauset på en annen kodelinje, trykker Du På Fortsett Skriptkjøring til du er pauset på riktig linje.

   Merk: hvis du stoppet på en annen linje, har du en nettleserutvidelse som registrerer en hendelseslytter click på hver side du besøker. Du ble satt på pause i utvidelsens click lytter. Hvis Du bruker Inkognitomodus til å bla privat, som deaktiverer alle utvidelser, kan du se at du pause på riktig linje med kode hver gang.

Hendelses Lytteren Stoppunkter er bare ett av mange typer stoppunkter tilgjengelig I DevTools. Det er verdt å huske alle de forskjellige typene, fordi hver type til slutt hjelper deg med å feilsøke forskjellige scenarier så raskt som mulig. Se Pause Koden Med Stoppunkter for å lære når og hvordan du bruker hver type.

# Trinn 4: Trinn gjennom koden

en vanlig årsak til feil er når et skript utføres i feil rekkefølge. Ved å gå gjennom koden din kan du gå gjennom kodens utførelse, en linje om gangen, og finne ut nøyaktig hvor den utføres i en annen rekkefølge enn du forventet. Prøv det nå:

1. På Kilder-panelet I DevTools klikker Du Trinn inn i neste funksjonskall for å gå gjennom utførelsen av funksjonen onClick(), en linje om gangen. DevTools fremhever følgende linje med kode:

   if (inputsAreEmpty()) {

2. Klikk Trinn over neste funksjonsanrop . DevTools utfører inputsAreEmpty() uten å gå inn i den. Legg merke til Hvordan DevTools hopper over noen linjer med kode. Dette skyldes at inputsAreEmpty() evalueres til false, slik at if – setningens kodeblokk ikke ble utført.

Det er den grunnleggende ideen om å gå gjennom kode. Hvis du ser på koden i get-started.js, kan du se at feilen sannsynligvis er et sted i updateLabel() – funksjonen. I stedet for å gå gjennom hver linje med kode, kan du bruke en annen type stoppunkt for å pause koden nærmere den sannsynlige plasseringen av feilen.

# Trinn 5: Angi et kodelinje-stoppunkt

kodelinje-stoppunkt er den vanligste typen stoppunkt. Når du har en bestemt linje med kode som du vil pause på, bruker du en linje-av-kode stoppunkt:

1. Se på den siste linjen med kode i updateLabel():

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

2. til venstre for koden kan du se linjenummeret til denne spesielle kodelinjen, som er 32. Klikk på 32. DevTools setter et blått ikon på toppen av 32. Dette betyr at det er en line-of-code stoppunkt på denne linjen. DevTools pause nå alltid før denne kodelinjen utføres.

3. Klikk Fortsett skriptkjøring . Skriptet fortsetter å kjøre til det når linje 32. På linjene 29, 30 og 31 skriver DevTools ut verdiene addend1, addend2 og sum til høyre for hver linjes semikolon.

   

   Figur 6. DevTools pauser på linje-av-kode stoppunkt på linje 32

# Trinn 6: Kontroller variable verdier

verdiene for addend1, addend2 og sum ser mistenkelige ut. De er innpakket i sitater, noe som betyr at de er strenger. Dette er en god hypotese for å forklare årsaken til feilen. Nå er det på tide å samle mer informasjon. DevTools gir en rekke verktøy for å undersøke variable verdier.

# Metode 1: Område-ruten

Når du er satt på pause på en kodelinje, Viser Område-ruten hvilke lokale og globale variabler som er definert, sammen med verdien for hver variabel. Det viser også lukkevariabler, når det er aktuelt. Dobbeltklikk en variabel verdi for å redigere den. Når Du ikke er satt på pause på en kodelinje, Er Område-ruten tom.

Figur 7. Område-ruten

# Metode 2: Se Uttrykk

Se Uttrykk-fanen lar deg overvåke verdiene for variabler over tid. Som navnet antyder, Er Se Uttrykk ikke bare begrenset til variabler. Du kan lagre alle gyldige JavaScript-uttrykk i Et Klokkeuttrykk. Prøv det nå:

1. Klikk På Se-fanen.

2. Klikk Legg Til Uttrykk .

3. Skriv typeof sum.

4. Trykk Enter. DevTools viser typeof sum: "string". Verdien til høyre for kolon er resultatet Av Klokkeuttrykket ditt.

   

   figur 8. Se Uttrykk-ruten (nederst til høyre), etter å ha opprettet typeof sum Se Uttrykk. Hvis DevTools-vinduet er stort, Er Watch Expression-ruten til høyre, over Event Listener Breakpoints-ruten.

som mistenkt blir sum evaluert som en streng, når det skal være et tall. Du har nå bekreftet at dette er årsaken til feilen.

# Metode 3: Konsollen

i tillegg til å vise console.log() meldinger, kan Du også bruke Konsollen til å evaluere vilkårlige JavaScript-setninger. Når det gjelder feilsøking, kan Du bruke Konsollen til å teste potensielle reparasjoner for feil. Prøv det nå:

1. hvis Du ikke har Konsollskuffen åpen, trykker Du På Escape for å åpne Den. Den åpnes nederst I DevTools-vinduet.

2. skriv inn parseInt(addend1) + parseInt(addend2)i Konsollen. Denne setningen fungerer fordi du er pauset på en linje med kode der addend1 og addend2 er i omfang.

3. Trykk Enter. DevTools evaluerer uttalelsen og skriver ut 6, som er resultatet du forventer demoen å produsere.

   

   Figur 9. Konsollskuffen, etter evaluering parseInt(addend1) + parseInt(addend2).

# Trinn 7: Bruk en løsning

Du har funnet en løsning for feilen. Alt som er igjen er å prøve ut din fix ved å redigere koden og re-kjører demoen. Du trenger ikke å forlate DevTools å bruke fix. Du kan redigere JavaScript-kode direkte i DevTools UI. Prøv det nå:

1. Klikk Fortsett skriptkjøring .
2. i Kodeditoren erstatter du linje 31, var sum = addend1 + addend2, med var sum = parseInt(addend1) + parseInt(addend2).
3. Trykk På Kommando+S (Mac) Eller Kontroll + S (Windows, Linux) for å lagre endringen.
4. Klikk Deaktiver avbruddspunkter . Den endres blått for å indikere at den er aktiv. Mens Dette er satt, ignorerer DevTools eventuelle stoppunkter du har satt.
5. Prøv demoen med forskjellige verdier. Demoen beregner nå riktig.

Gratulerer! Du vet nå hvordan Du får mest mulig Ut Av Chrome DevTools når du feilsøker JavaScript. Verktøyene og metodene du lærte i denne opplæringen, kan spare deg for utallige timer.

denne opplæringen viste deg bare to måter å sette stoppunkter på. DevTools tilbyr mange andre måter, inkludert:

• Betingede avbruddspunkter som bare utløses når betingelsen du oppgir, er sann.
• Avbruddspunkter på fanget eller uoppfanget unntak.
• xhr-avbruddspunkter som utløses når den forespurte URL-ADRESSEN samsvarer med en delstreng som du oppgir.

Se Pause Koden Med Stoppunkter for å lære når og hvordan du bruker hver type.

Det er et par kode stepping kontroller som ikke ble forklart i denne opplæringen. Se Gå over kodelinjen for å lære mer.