Feilsøking JavaScript -kode

Uansett hvor mye av en erfaren utvikler du er, vil du møte feil. Det er bare menneskets natur å gjøre feil. Noen ganger gjør vi en syntaksfeil eller en logisk feil. Uansett hva feilen er, vil du fikse den så snart som mulig.

Feilsøking er denne prosessen med å finne feil og fikse dem når du undersøker koden eller programmet. Mens JavaScript sies å være vanskelig å feilsøke, vil vi gjøre livene dine enkelt. I dag i denne artikkelen vil vi snakke om hvordan du feilsøker JavaScript -kode.

JavaScript Debugger

Alle moderne nettlesere har innebygde JavaScript-debuggere. Disse debuggerne hjelper oss ved å vise disse feilene. Disse debuggerne kan også slås av eller av, avhengig av våre behov.

Det interessante med disse debuggerne er at vi med dette også kan sette breakpoints. Breakpoints er plassert i koden vår der vi stopper utførelsen av koden. Når koden blir stoppet, kan vi se etter feilene og undersøke variablene.

Siden Google Chrome er en veldig kjent nettleser, vil vi bruke Chrome for de fleste deler av denne artikkelen. Til slutt vil vi imidlertid vise deg hvordan du kan aktivere JavaScript -feilsøking i andre nettlesere også.

For å begynne å feilsøke i Google Chrome, trykk på F12 nøkkel. Vi kan også trykke på Ctrl+Shift+I Å åpne feilsøkingen. Selv om disse to ikke fungerer, kan du prøve å høyreklikke fra musen hvor som helst i vinduet nettleser. Klikk på undersøke Og etter det gå til konsollen.

Ved hjelp av konsoll.Log () Metode

Google Chrome støtter feilsøking, og vi kan derfor bruke konsoll.Logg() I vår JavaScript -kode for å vise den inne i konsollvinduet vårt.

Eksempel

const str = "la oss feilsøke i konsoll";
// La oss se dette i konsollvinduet
konsoll.log (str);

Når vi klikker på F12 og går til konsollen vår, vil vi se:

Hvordan du angir breakpoints

Vi kan også angi bruddpunkter i feilsøkingsvinduet. Som nevnt tidligere, med hvert bruddpunkt vi angir, vil kodeutførelsen stoppe. Vi vil deretter undersøke koden vår og finne feilen. Hvis vi ikke fant feilen i det brytepunktet, vil vi legge til et nytt bruddpunkt. Det er veldig enkelt, da vi kan fortsette utførelseskoden med bare en klikkknapp (normalt spillknapp).

Anta at vi har en knapp. Hver gang vi klikker på knappen, tilfører den en verdi til forrige verdi. Standardverdien vil være 0. Nå hvis vi vil feilsøke dette ved hjelp av breakpoint, må vi sette et breakpoint. Hvis motverdien ikke øker med klikket, vet vi at problemet er på hendelseslytteren klikk.

For å sette et bruddpunkt på arrangementslytteren, klikker du F12. Dette vil lede deg til konsollvinduet. På konsollens side, klikk på kategorien Kilder og fortsett deretter til Breakpoint for hendelseslyttere. I dette klikk på musehendelsene og merker av for alternativet.

Gratulerer du har satt ditt første breakpoint. Hver gang du utfører programmet, vil det stoppe ved Mus Event Lytter. Vi kan gjenoppta det ved å klikke på CV -knappen øverst i kategorien Kilder.

Html:

0

JavaScript:

const btn = dokument.getElementById ("Vanish-BTN");
La verdi = 1;
btn.AddEventListener ("Klikk", funksjon ()
btn.indreHTML = verdi ++;
)

Bruke debugger -nøkkelord

Det er det samme som breakpoint som er forklart tidligere, bortsett fra at det gjøres gjennom JavaScript -kode og ikke manuelt. Vi bruker debugger -nøkkelordet når vi ønsker å feilsøke en kode. Debugger nøkkelord stopper i utgangspunktet strømmen av utførelse av kode akkurat som et bruddpunkt. Etter å ha stoppet utførelsen, kaller den den innebygde feilsøkingsfunksjonen. Denne feilsøkingsfunksjonen fungerer på samme måte som et breakpoint.

Anta at vi vil legge til to variabler. Imidlertid, før jeg viser dem som et varsel, vil jeg feilsøke dem. Følgende kode vil gi løsningen for dette:

La num1 = 5;
La num2 = 10;
Debugger;
Varsel (num1+num2);

Debugger -nøkkelordet tvinger et bruddpunkt eller stopper utførelsen av koden og påkaller feilsøkingsfunksjonen. Hvis det kreves noen feilsøking, kalles feilsøkingsfunksjonen; Ellers blir ingenting gjort.

Feilsøking i forskjellige nettlesere

Den vanlige praksisen å begynne å feilsøke i JavaScript er ved å klikke på undersøke eller trykke på F12 -tasten i nettleseren din. Imidlertid, hvis det ikke fungerer, følg kommandoene nedenfor for å åpne feilsøkingsmenyen.

Google Chrome

• Klikk på menyknappen øverst til høyre av Google Chrome
• Klikk på flere verktøy
• Klikk på utviklerverktøy
• Velg konsoll eller kilder i henhold til ditt behov

Mozilla Firefox

• Når du åpner nettleseren, klikker du på menyen
• Etter det klikk på webutvikleren
• Klikk på nettkonsollen

Microsoft Edge

• Når du åpner nettleseren, velger du utviklerverktøy fra menyen
• Velg deretter konsoll

Opera

• Åpen nettleser
• Velg meny og deretter SELECT -utvikleren
• Velg nå utviklerverktøy
• Klikk deretter på konsollen

Safari

• Gå til hovedmenyen og klikk på Safari -preferanser
• Klikk på det avanserte alternativet
• I menylinjen velger du Aktiver Show Develop -menyen.
• Når utviklingen sees i menyen, klikker du på Vis feilkonsoll.

Konklusjon

Det er mange feilsøkingsmetoder tilgjengelig i JavaScript. Vi forklarte de mest brukte/vanlige og enkle metodene for å feilsøke vår JavaScript -kode. Når du utvikler deg i JavaScript, må du feilsøke igjen og igjen. Jeg foreslår at du lagrer denne artikkelen som et bokmerke i nettleseren din, slik at du ikke trenger å søke igjen og igjen.