Glem feilsøking med console.log for alltid! Finn ut hvordan du bruker bruddpunkter for å feilsøke kode i Chrome Developer Tools

Oversettelse av artikkelenBrandon Morelli : Lær hvordan du feilsøker JavaScript med Chrome DevTools . Publisert med tillatelse fra forfatteren.

Det kan være vanskelig å finne og rette feil. Du kan bli fristet til å bruke console.log() ukontrollert for å få koden til å fungere riktig. Det er ferdig!

Denne artikkelen handler om den riktige måten å feilsøke på! Du vil lære hvordan du bruker verktøyene Chrome-utvikler for å sette bruddpunkter og undersøke kode. Denne tilnærmingen er ofte den mest effektive måten å finne og fikse feil i koden på.

Denne opplæringen viser hvordan du feilsøker ett spesifikt problem, men en lignende arbeidsflyt er nyttig for å feilsøke alle typer JavaScript-feil.

Trinn 1: Gjenskape feilen

Å gjengi feilen – det første trinnet til feilsøking – betyr å oppdage serien av handlinger som fører til at den dukker opp. Du må kanskje reprodusere feilen mange ganger, så det anbefales å eliminere unødvendige trinn.

For å reprodusere feilen skal vi fikse under denne håndboken, følg instruksjonene nedenfor:

• Her er nettsiden vi skal jobbe med for denne artikkelen. Åpne den i en ny fane: DEMO.
• I demo for Nummer 1 skriv inn 5.
• Skriv inn 1 for Nummer 2.
• Klikk Legg til nummer 1 og nummer 2.
• Se på etiketten under inngangene og knappen. Hun sier at 5 + 1 = 51.

Oops. Dette er et feil resultat. Resultatet skal være 6. Dette er feilen vi skal fikse.

Trinn 2: Sett kodekjøring på pause ved å bruke et bruddpunkt

DevTools lar deg sette koden på pause midt i utførelse og hente verdiene alle variabler på dette tidspunktet. Verktøyet for å sette kode på pause kalles et bruddpunkt. Prøv det nå:

• Gå tilbake til demoen og åpne DevTools ved å trykke Command+Option+I (Mac) eller Control+Shift+I (Windows, Linux).
• Gå til fanen Kilder.
• Klikk Avbruddspunkter for hendelseslytter for å utvide menyen. DevTools avslører en liste over hendelseskategorier som f.eks Animasjon Og Utklippstavle.
• Utvid hendelseskategorien Mus.
• Plukke ut klikk.

• Gå tilbake til demoen, klikk på nytt Legg til nummer 1 og nummer 2. DevTools vil pause og markere kodelinjen i panelet Kilder:

funksjon onClick() (

Når du trykker på klikk angir du et bruddpunkt basert på alle klikkhendelser. Når klikket skjer noen node og denne noden har en behandler klikk hendelser, DevTools stopper automatisk kjøringen på den første linjen med klikkbehandlerkode for denne noden.

Trinn 3: Utforsk koden

En vanlig årsak til feil er at skriptet kjøres i feil rekkefølge. Ved å undersøke koden kan du kjøre koden en linje om gangen og finne ut nøyaktig hvor den kjøres i en uventet rekkefølge. Prøv det nå:

• På panelet Kilder i DevTools klikk Gå inn i neste funksjonsanrop.

Gå inn i neste funksjonsanropsknapp

Denne knappen lar deg utføre onClick()-funksjonen én linje om gangen. DevTools vil stoppe kjøringen og markere følgende kodelinje:

If (inputsAreEmpty()) (

• Klikk nå på knappen Gå over neste funksjonsanrop.

Gå over knappen for neste funksjonsanrop

Dette forteller DevTools å utføre inputAreEmpty()-funksjonen uten å gå inn i den. Vær oppmerksom på at DevTools hopper over flere linjer med kode. Dette skjer fordi inputAreEmpty() evaluerer til false , så if-setningsblokken med kode blir ikke utført.

Dette er den grunnleggende ideen bak kodeutforskning. Hvis du ser på get-started.js-koden, vil du se at feilen sannsynligvis er et sted i updateLabel()-funksjonen. I stedet for å undersøke hver linje med kode, kan du bruke en annen type bruddpunkt for å pause koden nærmere der feilen oppstår.

Trinn 4: Angi et annet bruddpunkt

De vanligste bruddpunktene satt på kodelinjer er: når du har spesifikk streng koden du vil sette på pause. Prøv det nå:

• Se på siste linje kode i updateLabel():

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

Til venstre for koden kan du se nummeret på denne spesifikk linje: 32 . Klikk på den. DevTools vil plassere et blått ikon over nummeret. Dette betyr at det er et bruddpunkt på denne linjen. DevTools vil nå alltid pause før det.

• Klikk på knappen Gjenoppta kjøring av skript:

Knapp for gjenoppta kjøring av skript

Skriptet vil kjøre til det treffer et bruddpunkt.

• Se på kodelinjene som allerede er utført i updateLabel() . DevTools gir ut verdiene til addend1, addend2 og sum.

Sumverdien ser mistenkelig ut. Det ser ut som det blir behandlet som en streng når det skal være et tall. Dette kan være årsaken til feilen vår.

Trinn 5: Sjekke variabelverdiene

En annen vanlig årsak til feil er når en variabel eller funksjon genererer andre verdier enn forventet. For å se hvordan verdier endres over tid, bruker mange utviklere console.log() , men console.log() kan være kjedelig og ineffektiv av to grunner. For det første må du kanskje redigere koden manuelt med stort beløp console.log() kaller. For det andre vet du kanskje ikke nøyaktig hvilken variabel som er knyttet til feilen, så du må kanskje logge mange variabler.

Watch Expressions er et DevTools-alternativ til console.log() . Bruk Watch Expressions til å spore verdien av variabler over tid. Som navnet antyder, er Watch Expressions ikke begrenset til bare variabler. Du kan lagre alle gyldige JavaScript-uttrykk i Watch Expression. Prøv det nå:

• På panelet Kilder DevTools klikk Se. Seksjonen åpnes.
• Klikk Legg til uttrykk.

Legg til uttrykk-knapp

• Angi type sum.
• Trykk enter. DevTools vil vise: typeof sum: "string" . Verdien til høyre for kolon er resultatet av Watch-uttrykket ditt.

Som forventet behandles sum som en streng når det skal være et tall. Dette er grunnen til feilen vår i demoen.

Vi forteller deg hvordan du bruker panelet Chrome Devtools praktisk for feilsøking.

Å finne og fikse feil kan være vanskelig for nybegynnere. Hvis du tenker på å bruke console.log() for å feilsøke koden din Den beste avgjørelsen, da tar du feil.

I denne artikkelen vil vi snakke om flotte verktøy Google Chrome Devtools for debugging Denne prosessen er mye mer effektiv måte løsninger på dette problemet.

Dette er bare ett enkelt eksempel på hvordan du bruker feilsøking, men det kan brukes på ethvert problem.

Trinn 1: Gjenproduser feilen

Å reprodusere feil er alltid det første skrittet mot feilsøking. Dette betyr å finne rekkefølgen av handlinger som fører til feilen. Prosessen kan være lang, så prøv å optimalisere den.

For å følge trinnene i denne opplæringen selv, gjør følgende:

• Her er nettsiden vi skal jobbe med i denne opplæringen. Ikke glem å åpne den i en ny fane;
• Skriv inn tallet 5 i "Nummer 1"-feltet;
• Skriv inn tallet 1 i "Nummer 2"-feltet;
• Klikk på "Legg til"-knappen;
• Se, de forteller deg at 5+1=51;

Oops, det er åpenbart feil. Resultatet skal være tallet 6, og denne feilen må rettes.

Trinn 2: Sett kjøringen på pause ved å bruke et bruddpunkt

DevTools lar deg stoppe kodekjøring som pågår og se verdiene til alle variabler på det tidspunktet. Verktøyet for å sette kode på pause kalles et bruddpunkt. Prøve:

• Gå tilbake til testsiden vår og aktiver DevTools ved å trykke Cmd + Option + I (Mac) eller Ctrl + Shift + I (Windows, Linux);
• Gå til "Kilder"-fanen;
• Utvid "Event Listener". DevTools vil utvide en liste over hendelseskategorier som animasjon og utklippstavle;
• Merk av for "klikk"-boksen;

• Gå tilbake til siden, legg til "Nummer 1" og "Nummer 2" igjen. DevTools pauser demoen og markerer kodelinjen i kildepanelet. DevTools vil fremheve denne kodelinjen:
  

  funksjon onClick() (

  funksjon onClick() (

  
  Hvorfor skjer dette?

  Når du velger "klikk", setter du bruddpunkter som avhenger av klikkhendelser på hvert element som har en behandler for det.

  Trinn 3: Utfør trinnvis feilsøking

  En vanlig årsak til at feil oppstår er at skriptet ikke kjøres i den rekkefølgen du tror det skal. Du kan unngå dette problemet ved å observere utførelsen av koden linje for linje. La oss prøve:

  • I "Kilder"-panelet klikker du på "Gå inn i neste funksjonsanropsknapp"

  Denne knappen lar deg spore utførelsen av onClick-funksjonen sekvensielt. Stopp prosessen når DevTools uthever følgende kodelinje:

  if (inputsAreEmpty()) (

  if (inputsAreEmpty()) (

  • Klikk nå på "Gå over neste funksjonskall-knappen";

  DevTools vet nå å kjøre inputAreEmpty() uten å feilsøke innholdet. Vær oppmerksom på at DevTools hopper over flere linjer med kode. Dette er fordi inputAreEmpty() returnerer false, så if-blokken ble ikke utført.

  Det er poenget trinn-for-trinn feilsøking kode. Hvis du ser på koden i get-started.js, vil 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 bruddpunkt for å stoppe prosessen nærmere der feilen oppstår.

  Trinn 4: Velg et annet bruddpunkt

  Kodelinjetypen er det mest populære bruddpunktet. Hvis du vet hvor feilen kan være, bruk denne typen:

  • Se på den siste kodelinjen i updateLabel(), som ser slik ut:
    

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

    merkelapp. textContent = addend1 + " + " + addend2 + " = " + sum ;

  • Til venstre for denne koden vil du se et linjenummer: 32. Klikk 32. Nå vil DevTools alltid pause inntil denne kodelinjen er utført;
  • Klikk på knappen "Fortsett kjøring av skript". Skriptet vil fortsette å kjøre til neste linje kode med et bruddpunkt;
  • Se på kodelinjene i updateLabel() som allerede er utført. DevTools gir ut verdiene til addend1, addend2 og sum.

  Mengden ser mistenkelig ut. Det ser ut som det ikke blir evaluert som et tall, men som en streng. Dette er en annen vanlig årsak feil.

  Trinn 5: Sjekk variabelverdier

  En vanlig årsak til feil er at en variabel eller funksjon genererer feil verdi. Mange utviklere bruker console.log() for å se hvordan verdiene endres, men console.log() er et dårlig valg av minst to grunner: For det første kan det kreve manuell redigering av kode med mange kall til console.log() ), for det andre vet du kanskje ikke hvilken variabel som er knyttet til feilen, så du må vise flere variabler samtidig.

  Et alternativ til console.log i DevTools er Watch Expressions. Bruk Watch Expressions til å spore endringer i variabelverdier. Som navnet antyder, er Watch Expressions ikke begrenset til bare variabler. Du kan lagre et hvilket som helst gyldig JavaScript-uttrykk i Watch Expression:

  • I "Kilder"-panelet velger du fanen "Se";
  • Klikk deretter "Legg til uttrykk";
  • Type type sum;
  • Trykk enter. DevTools vil vise type sum: "streng". Denne verdien er resultatet av Watch Expression.

  

  Som forventet behandles sum som en streng, ikke et tall. Dette er den samme feilen som vi snakket om ovenfor.

  Et annet DevTools-alternativ til console.log() er konsollen. Utviklere bruker det ofte til å overskrive variable verdier når de feilsøker. I ditt tilfelle kan konsollen være nyttig for å sjekke måter å fikse feilen på. Eksempel:

  
  

  Trinn 6: Gjør rettelser

  Du har identifisert hvor feilen er. Alt som gjenstår er å fikse det ved å redigere koden og starte demoen på nytt. Du kan redigere JavaScript-kode direkte til brukergrensesnitt DevTools:

  • I koderedigeringsprogrammet, i kildepanelet, erstatter du var sum = addend1 + addend2 med var sum = parseInt(adddend1) + parseInt(adddend2); Dette er linje #31.
  • Trykk Cmd + S (Mac) eller Ctrl + S (Windows, Linux) for å bruke endringene. Bakgrunnen til koden vil endres til rød for å indikere at skriptet har blitt endret i DevTools;
  • Klikk "Deaktiver bruddpunkter"

  Fargen vil endres til blå. I denne modusen ignorerer DevTools eventuelle bruddpunkter du har angitt.

  • Klikk på "Fortsett kjøring av skript".

  Skriv inn tall i feltene og test. Nå skal alt fungere som det skal!

  Evnen til å feilsøke kode er en viktig ferdighet for en utvikler. Det er viktig å forstå og bruke det store utvalget av feilsøkingsverktøy som finnes for et bestemt programmeringsspråk.

  Dessverre virker feilsøking kanskje ikke like opplagt når du arbeider med JavaScript utenfor komplett miljø IDE. I hvert fall — ved første øyekast.

  Denne artikkelen vil se på hvordan du kan feilsøke JavaScript-kode i Google Chrome Dev Tools og i Visual Studio Code-editoren.

  Oversetterens notat: ved å klikke på denne lenken kan du se videoversjonen av denne artikkelen Feilsøking av JavaScript i Google Chrome og Visual Studio Code på engelsk.

  Forhåndsinnstillinger

  I denne artikkelen vil feilsøkingsprosessen bli diskutert ved hjelp av et eksempel. testapplikasjon kalt "Quick Chat":

  

  Du har to måter å bruke denne applikasjonen på. Du kan lage den selv ved å bruke denne en serie videotimer. Eller du kan bruke kildekoden til en ferdig Quick Chat-applikasjon:

  

  Uansett hvilket alternativ du velger, må du kjøre Quick Chat-appen lokalt.

  Du kan kjøre applikasjonen fra Node.js ( hvordan gjør jeg det). Eller bruk plugin under Visuelt studio Kode kalt Live Server.

  Hvis du er ny til å jobbe med denne plugin-modulen, kan du lære hvordan du jobber med den ved å bruke denne videoen — Live Server Extension i Visual Studio Code.

  Oversetterens notat: video på engelsk.

  MED teknisk poeng Tilsynelatende får jeg brukernavnet feil ved å bruke usernameInput.text i stedet for det korrekte usernameInput.value-alternativet. Hvis jeg gjorde en slik feil i det virkelige liv, ville min første tanke være å bruke console.log()-verktøyet.

  Men dette er ikke akkurat tilfellet som kan hjelpe meg, som du kan se på bildet nedenfor. Hvis det å bruke console.log() også var din første tanke, har du kommet til rett sted og gjør det rette ved å lese denne artikkelen!

  

  Grunnleggende om feilsøking

  La oss starte med det grunnleggende. Tanken bak feilsøking er at du kan sette såkalte bruddpunkter ( bruddpunkter) for å stoppe programkjøringen på et bestemt sted.

  Dette gir deg som utvikler en mulighet til å se på Nåværende situasjon applikasjon og sjekk for eksempel verdiene til variabler i den. Du kan til og med gå lenger og spore valgfrie variabler, slik at når applikasjonen stopper, kan du sjekke verdiene til disse variablene.

  Etter å ha satt et bruddpunkt ( bruddpunkt) i koden er det som regel flere alternativer for ytterligere handlinger:

  • fortsette programkjøringen
  • gå trinn for trinn gjennom alle stadier av programmet - linje for linje
  • gå ut fra gjeldende funksjon der du er
  • gå til neste funksjon

  Du vil også ha tilgang til å se anropsstakken ( ringestabel). Med andre ord, siden funksjoner i et program kan kalle andre funksjoner for utførelse, kan du vise samtalehistorikk disse funksjonene.

  Feilsøking i Google Chrome

  For å begynne å feilsøke applikasjonen din i Google Chrome-nettleseren, legg til en hendelsesbehandler med clickBtn-knapp operatør debugger som nedenfor:

  

  Når programkjøringen når linjen med debugger-setningen, vil applikasjonen bli suspendert og feilsøkingsverktøyene til Google Chrome-nettleseren aktiveres automatisk.

  Vær oppmerksom på at applikasjonen i nettleservinduet er skyggelagt grå for å vise at den er satt på pause. Vær også oppmerksom på at Kilder-fanen i Chrome Dev Tools åpnes automatisk:

  

  La oss se hva vi ser på Kilder-fanen.

  Kilder-fanen

  Det første du kanskje legger merke til på denne fanen er en kopi av programmets kildekode. Dette er koden som nettleseren har lastet inn og fungerer med.

  Du kan også legge merke til at kodelinjen med feilsøkingssetningen er uthevet i blått for å fortelle oss at programmet har sluttet å kjøre på dette punktet i koden:

  

  Google Chrome-nettleseren gir oss muligheten til å se kildekoden til en applikasjon. Når du har kildekoden foran deg, kan du installere i den bruddpunkter.

  Et bruddpunkt er ment å indikere et sted hvor programkjøringen skal stoppes. Operatør debugger, som vi brukte i eksemplet ovenfor, fungerer som bruddpunkt, men i kildekode applikasjoner som dette bruddpunkt det trenger ikke være bare én.

  Breakpoint er en bevisst stopp eller pause i programkjøringen.

  Å legge til bruddpunkt, må du klikke på takrenne — feltet til venstre for nummereringen av kodelinjer. Når du har fullført denne handlingen, vil du legge merke til at Google Chrome-nettleseren automatisk har lagt til dette bruddpunkt til "Knekkpunkter"-listen:

  

  Omfang-fanen

  Omfang-fanen er der du kan overvåke variabler i applikasjonen din. Vær oppmerksom på at denne fanen har tre seksjoner: lokalt omfang ( Lokalt), globalt omfang ( Global) og manusdel ( Manus).

  I skriptdelen kan du spore variabler i omfanget av gjeldende skript:

  

  Du vil bruke mesteparten av tiden på å feilsøke applikasjonen i denne fanen. Dette er et mye mer effektivt alternativ til å bruke flere console.log() s.

  Se-fanen

  Som nevnt tidligere, i tillegg til å vise variabler i fanen Scope, kan du også definere variabler hvis verdier du ønsker å overvåke gjennom programmets kjøring.

  Ved å legge til en variabel i Watch-fanen, hver gang du angir et bruddpunkt, kan du raskt sjekke verdien til den variabelen (som kan være udefinert avhengig av hvor du er i koden).

  Klikk på plusstegnet og skriv inn navnet på variabelen du vil overvåke, i vårt tilfelle brukernavnInput:

  

  Stepping, anropsstabel og bruddpunktliste

  Kategorien "Kilder", som ligger i nedre venstre hjørne av feilsøkingsvinduet, lar deg se en liste over bruddpunkter, anropsstakken ( ringestabel) etc.

  

  I ringestabel Det er bare én funksjon som er hendelsesbehandleren for påloggingsknappen. Funksjonen er oppført fordi det er den eneste funksjonen som ble kalt på dette øyeblikket. Siden noen funksjoner kan kalle andre funksjoner for utførelse, vil denne kjeden bli oppdatert tilsvarende.

  Legg også merke til pilknappene øverst på skjermen. Disse samsvarer med funksjonene ovenfor for å fortsette å kjøre koden eller gå gjennom den linje for linje ( stepping). Jeg vil anbefale å teste disse knappene litt for å bli vant til hvordan koden kan utføres.

  Endelig er det Forskjellige typer bruddpunkter som kan settes. La oss se på et eksempel på å lage et betinget bruddpunkt ( betinget bruddpunkt), som bare vil avfyres når en viss betingelse er oppfylt.

  La oss for eksempel si at vi ønsker å forhindre at påloggingsknapphendelsen kun behandles når brukeren prøver å logge på uten å skrive inn et brukernavn.

  Vi kan gjøre dette ved å klikke Høyreklikk mus på rennefeltet og skape bruddpunkt med følgende betingelse — usernameInput.text === "" :

  

  Ved feilsøking Raske apper Chat, hvis du klikker på påloggingsknappen uten brukernavn, vil dette bli lansert bruddpunkt. Ellers vil koden fortsette å kjøre som vanlig.

  Vær oppmerksom på at det er enda flere tilgjengelige alternativer bruddpunkter, som ikke er omtalt i denne artikkelen.

  Feilsøking i Visual Studio Code

  Chrome Developer Tools er et av de beste i sitt slag. Som du allerede har sett, tilbyr den utmerkede funksjoner og funksjonalitet for feilsøking av applikasjonen.

  Det har imidlertid Visual Studio Code-utviklingsteamet gjort stor jobb for å gjøre feilsøkingsprosessen i denne editoren enda mer perfekt.

  Jeg liker virkelig Visual Studio Code og bruker mer tid på det enn noen annen koderedigerer. Denne prosessen inkluderer også feilsøking.

  For å begynne å feilsøke kode i VS Code, må du installere Debugger for Chrome-plugin:

  

  La oss ta en titt på Debug-fanen. Som standard er den plassert i redaktørens sidefelt. Åpne denne fanen ved å klikke på ikonet som ser ut som en feil ( feil).

  Når du åpner dette panelet, vil du se verktøy som ligner veldig på de vi så i Google nettleser Chrome —  variabler, ringestabel, bruddpunkter:

  

  Flertall funksjonalitet, som vi behandlet i Chrome Dev Tools, er også tilgjengelig i VS-kode.

  Nå som vi er kjent med Feilsøkingsfanen, må vi lage en konfigurasjon som vil fortelle VS Code-editoren hvordan de skal feilsøke applikasjonen vår.

  VS Code lagrer feilsøkingskonfigurasjonen i en launch.json-fil i .vscode-mappen. For å få VS-kode til å opprette denne filen for oss, åpne "Ingen konfigurasjoner" rullegardinlisten i redigeringsmenyen og velg "Legg til konfigurasjon".

  VS Code lagrer feilsøkingskonfigurasjonen i en fil kalt launch.json inne i .vscode-mappen

  

  Velg deretter "Chrome" fra denne listen.

  Mens jeg snakket med kollegene mine nylig, ble jeg overrasket over at mange av dem aldri hadde brukt nettleserens innebygde JavaScript-konsollfeilsøker i arbeidet sitt. Dessverre jobber en av dem i firmaet mitt, jeg vil ikke røpe navnet hans.
  For de av dere som ennå ikke er kjent med API-nettleserkonsollen, er denne artikkelen skrevet.

  Visuell feilsøking

  Når du jobber med et nettsted, er feilsøking hovedsakelig avhengig av visuell oppfatning. Det er ekstremt enkelt å se feiljusterte kolonner, overlappende tekst, gjøre de nødvendige redigeringene og oppdatere siden. For PHP stopper feilmeldingen skriptet og viser problemet direkte på siden. Kort sagt: de fleste feil som kan fikses umiddelbart er enkle å se etter at siden er lastet inn.

  API-konsollen er et objekt (konsoll) som kan brukes til å sende ut feilsøkingsinformasjon (den kan brukes når siden har blitt lastet inn av nettleseren). Konsollen er mest effektiv når du arbeider med JavaScript.

  Feilsøking av javascript firebug

  Hvordan spore hendelser

  Firefox - Logg hendelser

  Firefox + Firebug + Firequery = Viser hendelser utløst ved hjelp av jQuery

  Bremser - slå av når den ikke fungerer

  Hallo! Fortsetter emnet, la oss snakke om feilsøking av skript ved hjelp av nettleseren. La oss for eksempel ta det meste beste nettleseren på jorden - Chrome.

  I prinsippet er slike verktøy tilgjengelige i alle nettlesere, og hvis du tenker på at de fleste nettlesere kjører på samme motor som Chrome, så vil det i prinsippet ikke være stor forskjell. Firefox er også veldig bra med Firebug-verktøyet.

  

  Generell visning av Kilder-panelet

  Start Chrome-nettleseren.

  Trykk F12 og utviklerverktøyene starter.

  Gå til Kilde-fanen

  
  

  Det er 3 soner her:

  1. Region kildefiler. Den inneholder alle prosjektfilene
  2. Tekstområde. Dette området inneholder teksten til filen
  3. Område for informasjon og kontroll. Vi snakker om henne senere

  Som regel, når du feilsøker, er kildefilområdet ikke nødvendig, så du kan skjule det med knappen.

  Generelle kontrollknapper

  
  

  3 mest brukte kontrollknapper:

  Format Denne knappen lar deg formatere koden. Du kan trenge det hvis du vil formatere andres kode. Konsoll Veldig viktig knappå klikke på som åpner konsollen. I konsollen kan du gå inn ulike kommandoer og operatører i JavaScript. Vindu Ved en stor kodedel lar den deg åpne koden i et eget vindu.

  Knekkpunkter

  La oss se på pow.js-filen som et eksempel. Hvis du klikker på en linje i denne filen, vil et bruddpunkt bli satt på den linjen.

  Det skal se omtrent slik ut:

  
  

  Et bruddpunkt kalles også et bruddpunkt; dette er mer en sjargong som har blitt assimilert i språket vårt og betyr bokstavelig talt også et bruddpunkt.

  I koden der du laget et bruddpunkt, kan du se på verdiene til variabler ved hvert trinn, generelt spore det på alle mulige måter.

  Breakpoint-informasjon vises på Breakpoints-fanen.

  Breakpoints-fanen er veldig nyttig når koden er veldig stor, den lar deg:

  • Gå raskt til stedet i koden der bruddpunktet er satt ved å klikke på teksten.
  • Deaktiver et bruddpunkt midlertidig ved å klikke på avmerkingsboksen.
  • Fjern raskt et bruddpunkt ved å høyreklikke på teksten og velge Fjern.

  Noen tilleggsfunksjoner

  • Et bruddpunkt kan også utløses direkte fra et skript ved å bruke debugger-kommandoen: function pow(x, n) ( ... debugger; //<-- отладчик остановится тут... }
  • Høyreklikk på et linjenummer i pow.js vil tillate deg å lage et såkalt betinget bruddpunkt, dvs. angi en betingelse der bruddpunktet skal utløses.

  Stopp og se deg rundt

  Siden funksjonen vår kjører samtidig med at siden lastes inn, er den enkleste måten å aktivere JavaScript-debugger på å laste den på nytt. For å gjøre dette, trykk F5. Og samtidig vil utførelsen av manuset stoppes på 6. linje.

  
  

  Vær oppmerksom på informasjonsfanene:

  • Se uttrykk– her kan du se gjeldende verdi av variablene du overvåker i skriptet.
  • Ring Stack– viser anropsstakken - dette er alle anropene som førte til denne kodelinjen.
  • Omfangsvariabler– viser variabler. Dessuten viser den både globale og lokale variabler.

  Utførelsesledelse

  La oss nå kjøre skriptet og spore driften. Vær oppmerksom på panelet øverst, det er 6 knapper, driften som vi vil vurdere.

  – fortsett kjøringen, eller du kan trykke på F8-tasten. Denne knappen fortsetter kjøringen av skriptet. På denne måten kan vi gå gjennom skriptet vårt som om det kjørte i en nettleser. – ta et steg uten å gå inn i funksjoner, eller F10-tasten.

  Utfør ett trinn i skriptet uten å gå inn i funksjonen.

  – ta et steg inne i funksjonen, tast F11. Utfører ett trinn i scriptet og går samtidig inn i funksjonen. – kjør til du avslutter gjeldende funksjon, tast Shift+F11.

  utfører hele koden i funksjonen.

  – deaktiver/aktiver alle bruddpunkter. Denne knappen deaktiverer ganske enkelt, og når den trykkes på nytt, aktiveres alle bruddpunkter. – aktiver/deaktiver automatisk stopp når det oppstår en feil. Denne knappen er veldig nyttig ved feilsøking og lar deg aktivere eller deaktivere automatisk stopp når en feil oppstår.

  Selve feilsøkingsprosessen består av å gå gjennom programmet trinn for trinn og observere verdiene til variablene.

  Nettleserkonsoll

  Når du feilsøker skriptkode, kan det være nyttig å gå til Konsoll-fanen og se om det er noen feil der. Du kan også sende ut informasjon til konsollen ved å bruke console.log().

  For eksempel:

  // resultatet vil være synlig i konsollen for (var i = 0; i< 6; i++) { console.log("значение", i); }

  Konsollen er tilgjengelig i alle nettlesere

  Konsollfeil

  JavaScript-skriptfeil kan vises i konsollen.

  

  I konsollen kan du se:

  Den røde linjen er selve feilmeldingen.

  Total

  Debuggeren lar deg:

  • Stopp ved det merkede punktet (breakpoint) eller ved feilsøkingskommandoen.
  • Utfør kode - feilsøk programmet én linje om gangen eller til et bestemt punkt.
  • Overvåk variabler, utfør kommandoer i konsollen, etc.

  I utviklerverktøyene er det andre faner som Elements lar deg se HTML-koden til siden, Tidslinjen viser hvor mange filer nettleseren laster ned og hvor mye tid det tar. Men disse fanene er ikke veldig interessante for oss ennå.