Glem alt om fejlretning med console.log for altid! Lær, hvordan du bruger brudpunkter til at fejlsøge kode i Chrome Developer Tools

Oversættelse af artiklenBrandon Morelli : Lær, hvordan du fejlretter JavaScript med Chrome DevTools . Udgivet med tilladelse fra forfatteren.

Det kan være svært at finde og rette fejl. Du kan blive fristet til at bruge console.log() ukontrolleret for at få din kode til at fungere korrekt. Det er færdigt!

Denne artikel handler om den korrekte måde at fejlfinde på! Du lærer at bruge værktøjerne Chrome udvikler at indstille brudpunkter og undersøge kode. Denne tilgang er ofte den mest effektive måde at finde og rette fejl i din kode på.

Denne vejledning viser, hvordan man fejlretter et specifikt problem, men en lignende arbejdsgang er nyttig til fejlretning af alle typer JavaScript-fejl.

Trin 1: Gengivelse af fejlen

At gengive fejlen – det første skridt til fejlretning – betyder at opdage rækken af ​​handlinger, der fører til dens fremkomst. Du skal muligvis gengive fejlen mange gange, så det er tilrådeligt at fjerne unødvendige trin.

For at genskabe fejlen skal vi rette i løbet af denne manual, følg instruktionerne nedenfor:

• Her er den webside, vi vil arbejde med til denne artikel. Åbn den i en ny fane: DEMO.
• I demo for Nummer 1 indtast 5.
• Indtast 1 for Nummer 2.
• Klik Tilføj nummer 1 og nummer 2.
• Se på etiketten under indgangene og knappen. Hun siger, at 5 + 1 = 51.

Ups. Dette er et forkert resultat. Resultatet skulle være 6. Det er den fejl, vi skal rette.

Trin 2: Sæt kodeudførelse på pause ved hjælp af et brudpunkt

DevTools giver dig mulighed for at sætte din kode på pause midt i udførelse og hente værdierne alle sammen variable på dette tidspunkt. Værktøjet til at sætte kode på pause kaldes et breakpoint. Prøv det nu:

• Vend tilbage til demoen og åbn DevTools ved at trykke på Command+Option+I (Mac) eller Control+Shift+I (Windows, Linux).
• Gå til fanen Kilder.
• Klik Hændelseslytterens brudpunkter for at udvide menuen. DevTools afslører en liste over begivenhedskategorier som f.eks Animation Og Udklipsholder.
• Udvid begivenhedskategori Mus.
• Vælg klik.

• Vend tilbage til demoen, klik igen Tilføj nummer 1 og nummer 2. DevTools pauser og fremhæver kodelinjen i panelet Kilder:

funktion onClick() (

Når du trykker på klik, indstiller du et brudpunkt baseret på alle klikhændelser. Når klikket opstår nogen node og denne node har en handler klik på begivenheder, stopper DevTools automatisk eksekvering på den første linje med klikhåndteringskode for denne node.

Trin 3: Udforsk koden

En almindelig årsag til fejl er, at scriptet udføres i den forkerte rækkefølge. Ved at undersøge koden kan du udføre koden en linje ad gangen og finde ud af præcis, hvor den udføres i en uventet rækkefølge. Prøv det nu:

• På panelet Kilder i DevTools klik Træd ind i næste funktionsopkald.

Gå ind i næste funktionsopkaldsknap

Denne knap giver dig mulighed for at udføre onClick()-funktionen en linje ad gangen. DevTools stopper eksekveringen og fremhæver følgende kodelinje:

If (inputsAreEmpty()) (

• Klik nu på knappen Gå over næste funktionsopkald.

Gå over næste funktionsopkaldsknap

Dette fortæller DevTools at udføre funktionen inputAreEmpty() uden at gå ind i den. Bemærk venligst, at DevTools springer flere linjer kode over. Dette sker, fordi inputAreEmpty() evaluerer til false , så if-sætningsblokken med kode udføres ikke.

Dette er den grundlæggende idé bag kodeudforskning. Hvis du ser på get-started.js-koden, vil du se, at fejlen sandsynligvis er et sted i updateLabel()-funktionen. I stedet for at undersøge hver linje kode, kan du bruge en anden type brudpunkt til at pause koden tættere på, hvor fejlen opstår.

Trin 4: Indstil et andet brudpunkt

De mest almindelige brudpunkter sat på kodelinjer er: når du har specifik streng kode, som du vil sætte på pause. Prøv det nu:

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

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

Til venstre for koden kan du se nummeret på denne specifik linje: 32 . Klik på den. DevTools placerer et blåt ikon over nummeret. Det betyder, at der er et brudpunkt på denne linje. DevTools vil nu altid holde pause før det.

• Klik på knappen Genoptag scriptudførelse:

Knappen Genoptag scriptudførelse

Scriptet kører, indtil det rammer et brudpunkt.

• Se på de kodelinjer, der allerede er udført i updateLabel() . DevTools udsender værdierne addend1, addend2 og sum.

Sumværdien ser mistænkelig ud. Det ser ud til, at det bliver behandlet som en streng, når det skal være et tal. Dette kan være årsagen til vores fejl.

Trin 5: Kontrol af variabelværdierne

En anden almindelig årsag til fejl er, når en variabel eller funktion genererer andre værdier end forventet. For at se, hvordan værdier ændrer sig over tid, bruger mange udviklere console.log() , men console.log() kan være kedeligt og ineffektivt af to grunde. For det første skal du muligvis redigere koden manuelt med stort beløb console.log() kalder. For det andet ved du måske ikke præcis, hvilken variabel der er forbundet med fejlen, så du skal muligvis logge mange variabler.

Watch Expressions er et DevTools-alternativ til console.log() . Brug Watch Expressions til at spore værdien af ​​variabler over tid. Som navnet antyder, er Watch Expressions ikke begrænset til kun variabler. Du kan gemme enhver gyldig JavaScript udtryk i Watch Expression. Prøv det nu:

• På panelet Kilder Klik på DevTools Holde øje. Afsnittet åbnes.
• Klik Tilføj udtryk.

Knappen Tilføj udtryk

• Indtast summen.
• Tryk på Enter. DevTools vil vise: typeof sum: "string" . Værdien til højre for kolon er resultatet af dit Ur-udtryk.

Som forventet behandles sum som en streng, når det skal være et tal. Dette er årsagen til vores fejl i demoen.

Vi fortæller dig, hvordan du bruger panelet Chrome Devtools praktisk til fejlretning.

At finde og rette fejl kan være svært for begyndere. Hvis du overvejer at bruge console.log() til at fejlsøge din kode Den bedste beslutning, så tager du fejl.

I denne artikel vil vi tale om gode værktøjer Google Chrome Devtools til debugging Denne proces er meget mere effektiv måde løsninger på dette problem.

Dette er blot et enkelt eksempel på, hvordan man bruger fejlfinding, men det kan anvendes på ethvert problem.

Trin 1: Genskab fejlen

Gengivelse af fejl er altid det første skridt mod fejlretning. Det betyder at finde rækkefølgen af ​​handlinger, der fører til fejlen. Processen kan være lang, så prøv at optimere den.

For selv at følge trinene i denne øvelse skal du gøre følgende:

• Her er den webside, vi vil arbejde med i denne vejledning. Glem ikke at åbne den i en ny fane;
• Indtast tallet 5 i feltet "Nummer 1";
• Indtast tallet 1 i feltet "Nummer 2";
• Klik på "Tilføj" knappen;
• Se, de fortæller dig, at 5+1=51;

Ups, det er åbenbart forkert. Resultatet skal være tallet 6, og denne fejl skal rettes.

Trin 2: Sæt udførelse på pause ved hjælp af et brudpunkt

DevTools giver dig mulighed for at stoppe kodekørsel i gang og se værdierne af alle variabler på det tidspunkt. Værktøjet til at sætte kode på pause kaldes et breakpoint. Prøve:

• Vend tilbage til vores testside og aktiver DevTools ved at trykke på Cmd + Option + I (Mac) eller Ctrl + Shift + I (Windows, Linux);
• Gå til fanen "Kilder";
• Udvid "Begivenhedslytter". DevTools udvider en liste over begivenhedskategorier såsom animation og udklipsholder;
• Marker "klik" boksen;

• Vend tilbage til siden, tilføje "Number 1" og "Number 2" igen. DevTools sætter demoen på pause og fremhæver kodelinjen i kildepanelet. DevTools fremhæver denne kodelinje:
  

  funktion onClick() (

  funktion onClick() (

  
  Hvorfor sker dette?

  Når du vælger "klik", sætter du pausepunkter, der afhænger af klikhændelser på hvert element, der har en handler til det.

  Trin 3: Udfør trin-for-trin fejlretning

  En almindelig årsag til, at der opstår fejl, er, at scriptet ikke udføres i den rækkefølge, du mener, det skal. Du kan undgå dette problem ved at observere udførelsen af ​​koden linje for linje. Lad os prøve:

  • I panelet "Kilder" skal du klikke på knappen "Træd ind i næste funktionsopkald"

  Denne knap giver dig mulighed for sekventielt at spore udførelsen af ​​onClick-funktionen. Stop processen, når DevTools fremhæver følgende kodelinje:

  if (inputsAreEmpty()) (

  if (inputsAreEmpty()) (

  • Klik nu på knappen "Gå over næste funktionsopkald";

  DevTools ved nu at udføre inputAreEmpty() uden at fejlsøge indholdet. Bemærk venligst, at DevTools springer flere linjer kode over. Dette skyldes, at inputAreEmpty() returnerer falsk, så if-blokken blev ikke udført.

  Det er pointen trin-for-trin fejlretning kode. Hvis du ser på koden i get-started.js, vil du se, at fejlen sandsynligvis er et sted i updateLabel()-funktionen. I stedet for at gennemgå hver linje kode, kan du bruge en anden type brudpunkt til at stoppe processen tættere på, hvor fejlen opstår.

  Trin 4: Vælg et andet brudpunkt

  Line-of-code-typen er det mest populære breakpoint. Hvis du ved, hvor fejlen kan være, så brug denne type:

  • Se på den sidste kodelinje i updateLabel(), som ser sådan ud:
    

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

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

  • Til venstre for denne kode vil du se et linjenummer: 32. Klik på 32. Nu vil DevTools altid holde pause, indtil denne kodelinje udføres;
  • Klik på knappen "Genoptag scriptudførelse". Scriptet fortsætter med at køre indtil næste linje kode med et brudpunkt;
  • Se på de kodelinjer i updateLabel(), der allerede er blevet udført. DevTools udsender værdierne addend1, addend2 og sum.

  Beløbet ser mistænkeligt ud. Det ser ud til, at det ikke bliver vurderet som et tal, men som en streng. Dette er en anden almindelig årsag fejl.

  Trin 5: Tjek variabelværdier

  En almindelig årsag til fejl er, at en variabel eller funktion genererer den forkerte værdi. Mange udviklere bruger console.log() til at se, hvordan værdier ændrer sig, men console.log() er et dårligt valg af mindst to grunde: For det første kan det kræve manuel redigering af kode med mange kald til console.log() ), for det andet ved du muligvis ikke, hvilken variabel der er forbundet med fejlen, så du bliver nødt til at vise flere variable på én gang.

  Et alternativ til console.log i DevTools er Watch Expressions. Brug Watch Expressions til at spore ændringer i variabelværdier. Som navnet antyder, er Watch Expressions ikke begrænset til kun variabler. Du kan gemme et hvilket som helst gyldigt JavaScript-udtryk i Watch Expression:

  • I panelet "Kilder" skal du vælge fanen "Se";
  • Klik derefter på "Tilføj udtryk";
  • Type summen;
  • Tryk på enter. DevTools viser summen: "streng". Denne værdi er resultatet af Watch Expression.

  

  Som forventet behandles sum som en streng, ikke et tal. Dette er den samme fejl, som vi talte om ovenfor.

  Et andet DevTools-alternativ til console.log() er konsollen. Udviklere bruger det ofte til at overskrive variable værdier ved fejlretning. I dit tilfælde kan konsollen være praktisk til at kontrollere måder at rette fejlen på. Eksempel:

  
  

  Trin 6: Foretag rettelser

  Du har identificeret, hvor fejlen er. Det eneste, der er tilbage, er at rette det ved at redigere koden og genstarte demoen. Du kan redigere JavaScript-kode direkte til brugergrænseflade DevTools:

  • I kodeeditoren, i kildepanelet, skal du erstatte var sum = addend1 + addend2 med var sum = parseInt(adddend1) + parseInt(adddend2); Dette er linje #31.
  • Tryk på Cmd + S (Mac) eller Ctrl + S (Windows, Linux) for at anvende ændringerne. Baggrunden for koden ændres til rød for at angive, at scriptet er blevet ændret i DevTools;
  • Klik på "Deaktiver pausepunkter"

  Farven skifter til blå. I denne tilstand ignorerer DevTools eventuelle pausepunkter, du har angivet.

  • Klik på "Genoptag scriptudførelse".

  Indtast tal i felterne og test. Nu skulle alt fungere som det skal!

  Evnen til at fejlsøge kode er en vigtig færdighed for en udvikler. Det er vigtigt at forstå og bruge den brede vifte af fejlfindingsværktøjer, der findes for et bestemt programmeringssprog.

  Desværre virker fejlretning måske ikke så indlysende, når man arbejder med JavaScript udenfor komplet miljø IDE. I hvert fald — ved første øjekast.

  Denne artikel vil se på, hvordan du kan fejlsøge JavaScript-kode i Google Chrome Dev Tools og i Visual Studio Code-editoren.

  Oversætterens note: ved at klikke på dette link kan du se videoversionen af ​​denne artikel Fejlretning af JavaScript i Google Chrome og Visual Studio Code på engelsk.

  Forudindstillinger

  I denne artikel vil fejlretningsprocessen blive diskuteret ved hjælp af et eksempel. test applikation kaldet "Quick Chat":

  

  Du har to måder at bruge denne applikation på. Du kan selv oprette det ved hjælp af dette en række videolektioner. Eller du kan bruge kildekoden til en færdiglavet Quick Chat-applikation:

  

  Uanset hvilken mulighed du vælger, skal du køre Quick Chat-appen lokalt.

  Du kan køre programmet fra Node.js ( hvordan gør jeg det). Eller brug pluginnet under Visual Studio Kode kaldet Live Server.

  Hvis du er ny til at arbejde med dette plugin, kan du lære, hvordan du arbejder med det ved hjælp af denne video — Live Server Extension i Visual Studio Code.

  Oversætterens note: video på engelsk.

  MED teknisk punkt Tilsyneladende får jeg brugernavnet forkert ved at bruge usernameInput.text i stedet for den korrekte usernameInput.value mulighed. Hvis jeg lavede sådan en fejl i I virkeligheden, min første tanke ville være at bruge værktøjet console.log() .

  Men det er ikke ligefrem tilfældet, der kunne hjælpe mig, som du kan se på billedet nedenfor. Hvis brug af console.log() også var din første tanke, er du kommet til det rigtige sted og gør det rigtige ved at læse denne artikel!

  

  Grundlæggende fejlretning

  Lad os starte med det grundlæggende. Tanken bag debugging er, at du kan indstille såkaldte breakpoints ( brudpunkter) for at stoppe programkørsel på et bestemt sted.

  Dette giver dig som udvikler mulighed for at se på Nuværende tilstand anvende og kontrollere for eksempel værdierne af variabler i den. Du kan endda gå længere og spore eventuelle variabler efter eget valg, så du kan kontrollere værdierne for disse variable, når applikationen stopper.

  Efter indstilling af et brudpunkt ( brudpunkt) i koden er der som regel flere muligheder for yderligere handlinger:

  • fortsætte programmets udførelse
  • gå trin for trin gennem alle trin i programmet - linje for linje
  • udgang fra nuværende funktion hvor du er
  • gå til næste funktion

  Du vil også have adgang til at se opkaldsstakken ( opkaldsstabel). Med andre ord, da funktioner i et program kan kalde andre funktioner til udførelse, kan du se opkaldshistorik disse funktioner.

  Fejlretning i Google Chrome

  For at begynde at fejlfinde din applikation i Google Chrome-browseren skal du tilføje en clickBtn-knap-hændelseshandler operatør debugger som nedenfor:

  

  Når programafviklingen når linjen med debugger-sætningen, vil applikationen blive suspenderet, og fejlfindingsværktøjerne i Google Chrome-browseren aktiveres automatisk.

  Bemærk venligst, at applikationen i browservinduet er skraveret grå for at vise, at den er sat på pause. Bemærk også, at fanen Kilder i Chrome Dev Tools åbnede automatisk:

  

  Lad os se, hvad vi ser på fanen Kilder.

  Kilder Tab

  Det første, du måske bemærker på denne fane, er en kopi af programmets kildekode. Dette er den kode, som browseren har indlæst og arbejder med.

  Du kan også bemærke, at kodelinjen med fejlretningssætningen er fremhævet med blåt for at fortælle os, at applikationen er holdt op med at køre på dette tidspunkt i koden:

  

  Google Chrome-browseren giver os mulighed for at se kildekoden til en applikation. Når du har kildekoden foran dig, kan du installere i den brudpunkter.

  Et brudpunkt er beregnet til at angive et sted, hvor programafviklingen skal stoppes. Operatør debugger, som vi brugte i eksemplet ovenfor, fungerer som brudpunkt, men i kildekode applikationer som denne brudpunkt der behøver ikke kun at være én.

  Breakpoint er et bevidst stop eller pause i programafviklingen.

  At tilføje brudpunkt, skal du klikke på gutter — feltet til venstre for nummereringen af ​​kodelinjer. Når du har fuldført denne handling, vil du bemærke, at Google Chrome-browseren automatisk har tilføjet dette brudpunkt til listen "Breakpoints":

  

  Fanen Omfang

  Fanen Omfang er, hvor du kan overvåge variabler i din applikation. Bemærk venligst, at denne fane har tre sektioner: lokalt omfang ( Lokal), globalt omfang ( Global) og script sektion ( Manuskript).

  I scriptsektionen kan du spore variabler inden for det aktuelle scripts omfang:

  

  Du vil bruge det meste af tiden på at fejlfinde applikationen på denne fane. Dette er et meget mere effektivt alternativ til at bruge flere console.log() s.

  Fanen Watch

  Som tidligere nævnt kan du udover at se variabler på fanen Scope også definere variabler, hvis værdier du gerne vil overvåge under programmets afvikling.

  Ved at tilføje en variabel på fanen Watch, hver gang du indstiller et brudpunkt, kan du hurtigt kontrollere værdien af ​​den variabel (som kan være udefineret afhængigt af hvor du er i koden).

  Klik på plustegnet og indtast navnet på den variabel, du vil overvåge, i vores tilfælde brugernavnInput:

  

  Stepping, opkaldsstak og breakpointliste

  Fanebladet "Kilder", placeret i nederste venstre hjørne af fejlfindingsvinduet, giver dig mulighed for at se en liste over brudpunkter, opkaldsstakken ( opkaldsstabel) etc.

  

  I opkaldsstabel Der er kun én funktion, som er hændelseshandleren for login-knappen. Funktionen er angivet, fordi det er den eneste funktion, der blev aktiveret dette øjeblik. Da nogle funktioner kan kalde andre funktioner til udførelse, vil denne kæde blive opdateret i overensstemmelse hermed.

  Bemærk også pileknapperne øverst på skærmen. Disse svarer til funktionerne ovenfor for at fortsætte med at køre din kode eller gå gennem den linje for linje ( trin). Jeg vil anbefale at teste disse knapper lidt for at vænne sig til hvordan koden kan eksekveres.

  Endelig er der Forskellige typer brudpunkter, der kan indstilles. Lad os se på et eksempel på at skabe et betinget brudpunkt ( betinget brudpunkt), som kun vil udløses, når en bestemt betingelse er opfyldt.

  Lad os f.eks. sige, at vi ønsker at forhindre login-knap-hændelsen i kun at blive behandlet, når brugeren forsøger at logge ind uden at indtaste et brugernavn.

  Det kan vi gøre ved at klikke Højreklik musen på rendestenen og skabe brudpunkt med følgende betingelse — brugernavnInput.text === "" :

  

  I tilfælde af fejlretning Hurtige apps Chat, hvis du klikker på login-knappen uden et brugernavn, vil dette blive lanceret brudpunkt. Ellers vil koden fortsætte med at køre som normalt.

  Bemærk venligst, at der er endnu flere tilgængelige muligheder brudpunkter, som ikke diskuteres i denne artikel.

  Fejlretning i Visual Studio Code

  Chrome Developer Tools er et af de bedste af sin slags. Som du allerede har set, tilbyder den fremragende funktioner og funktionalitet til fejlretning af applikationen.

  Det har Visual Studio Code-udviklingsteamet dog gjort stort arbejde for at gøre fejlsøgningsprocessen i denne editor endnu mere perfekt.

  Jeg kan virkelig godt lide Visual Studio Code og bruger mere tid i det end nogen anden kodeeditor. Denne proces inkluderer også fejlretning.

  For at begynde at fejlfinde kode i VS Code, skal du installere Debugger til Chrome-plugin:

  

  Lad os tage et kig på fanen Debug. Som standard er den placeret i editorens sidebjælke. Åbn denne fane ved at klikke på ikonet, der ligner en fejl ( insekt).

  Når du åbner dette panel, vil du se værktøjer, der ligner meget dem, vi så i Google browser Chrome —  variabler, opkaldsstabel, brudpunkter:

  

  Flertal funktionalitet, som vi behandlede i Chrome Dev Tools, er også tilgængelige i VS Code.

  Nu hvor vi er bekendt med Fejlfindingsfanen, skal vi oprette en konfiguration, der fortæller VS Code-editoren, hvordan den fejlretter vores applikation.

  VS Code gemmer fejlfindingskonfigurationen i en launch.json-fil inde i .vscode-mappen. For at få VS-kode til at oprette denne fil for os, skal du i editormenuen åbne rullelisten "Ingen konfigurationer" og vælge "Tilføj konfiguration".

  VS Code gemmer fejlfindingskonfigurationen i en fil kaldet launch.json inde i .vscode-mappen

  

  Vælg derefter "Chrome" fra denne liste.

  Mens jeg talte med mine kolleger for nylig, blev jeg overrasket over, at mange af dem aldrig havde brugt browserens indbyggede JavaScript-konsolfejlfinding i deres arbejde. Desværre arbejder en af ​​dem i mit firma; jeg vil ikke oplyse hans navn.
  For dem af jer, der endnu ikke er bekendt med API-browserkonsollen, er denne artikel skrevet.

  Visuel debugging

  Når du arbejder på et websted, er fejlretning primært afhængig af visuel perception. Det er ekstremt nemt at se forkert justerede kolonner, overlappende tekst, foretage de nødvendige redigeringer og opdatere siden. For PHP stopper fejlmeddelelsen scriptet og viser problemet direkte på siden. Kort sagt: de fleste fejl, der kan rettes med det samme, er lette at se, efter at siden er indlæst.

  API-konsollen er et objekt (konsol), der kan bruges til at udlæse fejlfindingsoplysninger (den kan bruges, når siden er blevet indlæst af browseren). Konsollen er mest effektiv, når du arbejder med JavaScript.

  Fejlretning af javascript firebug

  Sådan sporer du begivenheder

  Firefox - Loghændelser

  Firefox + Firebug + Firequery = Viser hændelser udløst ved hjælp af jQuery

  Bremser - sluk, når de ikke virker

  Hej! Fortsætter emnet, lad os tale om fejlretning af scripts ved hjælp af browseren. Lad os for eksempel tage det meste bedste browser på jorden - Chrome.

  I princippet er sådanne værktøjer tilgængelige i enhver browser, og hvis man tænker på, at de fleste browsere kører på samme motor som Chrome, så vil der i princippet ikke være den store forskel. Firefox er også meget godt med sit Firebug-værktøj.

  

  Generel visning af panelet Kilder

  Start Chrome-browseren.

  Tryk på F12, og udviklerværktøjerne starter.

  Gå til fanen Kilde

  
  

  Der er 3 zoner her:

  1. Område kildefiler. Den indeholder alle projektfilerne
  2. Tekstområde. Dette område indeholder teksten til filen
  3. Område for information og kontrol. Vi taler om hende senere

  Som regel er kildefilområdet ikke nødvendigt ved fejlretning, så du kan skjule det med knappen.

  Generelle kontrolknapper

  
  

  3 mest brugte kontrolknapper:

  Format Denne knap giver dig mulighed for at formatere koden. Du kan få brug for det, hvis du vil formatere en andens kode. Konsol Meget vigtig knap ved at klikke på som åbner konsollen. I konsollen kan du indtaste forskellige kommandoer og operatører i JavaScript. Vindue I tilfælde af et stort kodeudsnit giver det dig mulighed for at åbne koden i et separat vindue.

  Knækpunkter

  Lad os se på filen pow.js som et eksempel. Hvis du klikker på en linje i denne fil, vil et brudpunkt blive sat på den linje.

  Det skal se sådan ud:

  
  

  Et brudpunkt kaldes også et brudpunkt; dette er mere en jargon, der er blevet assimileret i vores sprog og betyder bogstaveligt talt også et brudpunkt.

  I koden, hvor du lavede et breakpoint, kan du se på værdierne af variabler ved hvert trin, generelt spore det på alle mulige måder.

  Oplysninger om pausepunkter vises på fanen Breakpoints.

  Fanen Breakpoints er meget nyttig, når koden er meget stor, den giver dig mulighed for at:

  • Gå hurtigt til det sted i koden, hvor brudpunktet er indstillet, ved blot at klikke på teksten.
  • Deaktiver midlertidigt et brudpunkt ved at klikke på afkrydsningsfeltet.
  • Fjern hurtigt et brudpunkt ved at højreklikke på teksten og vælge Fjern.

  Nogle ekstra funktioner

  • Et breakpoint kan også udløses direkte fra et script ved hjælp af debugger-kommandoen: function pow(x, n) ( ... debugger; //<-- отладчик остановится тут... }
  • Højreklik på et linjenummer i pow.js vil give dig mulighed for at oprette et såkaldt betinget brudpunkt, dvs. indstille en betingelse, hvorunder brudpunktet vil blive udløst.

  Stop op og se dig omkring

  Da vores funktion kører samtidigt med sidens indlæsning, er den nemmeste måde at aktivere JavaScript-debuggeren på at genindlæse den. For at gøre dette skal du trykke på F5. Og samtidig vil udførelsen af ​​scriptet blive stoppet på 6. linje.

  
  

  Vær opmærksom på informationsfanerne:

  • Se udtryk– her kan du se den aktuelle værdi af de variabler, som du sporer i scriptet.
  • Ring til stak– viser opkaldsstakken - det er alle de opkald, der førte til denne kodelinje.
  • Omfangsvariable– viser variabler. Desuden viser den både globale og lokale variabler.

  Udførelsesledelse

  Lad os nu køre scriptet og spore dets drift. Vær opmærksom på panelet øverst, der er 6 knapper, hvis funktion vi vil overveje.

  – fortsæt udførelsen, eller du kan trykke på F8-tasten. Denne knap fortsætter udførelse af scriptet. På denne måde kan vi gå gennem vores script, som om det kørte i en browser. – tag et skridt uden at gå ind i funktioner, eller F10-tasten.

  Udfør et trin af scriptet uden at gå ind i funktionen.

  – tag et skridt ind i funktionen, tast F11. Udfører et trin af scriptet og går samtidig ind i funktionen. – udfør indtil du afslutter den aktuelle funktion, tast Shift+F11.

  udfører hele koden indeholdt i funktionen.

  – deaktiver/aktiver alle brudpunkter. Denne knap deaktiverer ganske enkelt, og når den trykkes igen, aktiveres alle brudpunkter. – aktiver/deaktiver automatisk stop, når der opstår en fejl. Denne knap er meget nyttig ved fejlfinding og giver dig mulighed for at aktivere eller deaktivere automatisk stop, når der opstår en fejl.

  Selve debugging-processen består af at gennemgå programmet trin for trin og observere variablernes værdier.

  Browserkonsol

  Ved fejlretning af scriptkode kan det være nyttigt at gå til fanen Konsol og se, om der er fejl der. Du kan også udlæse information til konsollen ved hjælp af console.log().

  For eksempel:

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

  Konsollen er tilgængelig i enhver browser

  Konsolfejl

  JavaScript-scriptfejl kan ses i konsollen.

  

  I konsollen kan du se:

  Den røde linje er den faktiske fejlmeddelelse.

  Total

  Debuggeren giver dig mulighed for at:

  • Stop ved det markerede punkt (breakpoint) eller ved debugger-kommandoen.
  • Udfør kode - fejlfind programmet en linje ad gangen eller til et bestemt punkt.
  • Overvåg variabler, udfør kommandoer i konsollen osv.

  I udviklerværktøjerne er der andre faner som Elements giver dig mulighed for at se HTML-koden på siden, Tidslinje viser hvor mange filer browseren downloader og hvor lang tid det tager. Men disse faner er ikke særlig interessante for os endnu.