I denne artikkelen skal vi forklare hvordan du feilsøker JavaScript ved hjelp av DevTools i Chrome trinn for trinn. Hvis du vil feilsøke JavaScript -koden din i Chrome, må du følge disse trinnene som nevnt nedenfor.

prosjekt oversikt

Jeg skal demonstrere et eksempel på hvordan du feilsøker JavaScript -kode innen Chrome. I dette trinnet skal jeg gi en grunnleggende beskrivelse av koden. Dette prosjektet handler om å beregne modulo -drift mellom to tall. Dette eksemplet lar deg passere verdien av henholdsvis utbytte og divisor. Deretter vil det ta et øyeblikk å beregne mod mellom to tall når du klikker på beregningsknappen. Syntaksen til modulo -operasjonen er som følger:

x mod y = r

Hvor x = utbytte, y = divisor og r = resten

Det er to filer i dette prosjektet, .html og .JS -fil. JavaScript -fil inneholder 5 funksjoner for å beregne mod av to tall:

1. Klikk på Handler: Det gir en varslingsmelding hvis ett eller begge inngangsfeltene er tomme
2. Inngangene er tomme (): Denne funksjonen brukes til å sjekke om inngangsfeltene er tomme eller ikke
3. updatelabel (): Denne funksjonen brukes til å beregne moden av to tall
4. getNumber1 (): Pleide å få verdien av første tall
5. getNumber2 (): Pleide å få verdien av andre nummer

JavaScript -kode er illustrert nedenfor:

funksjon onClick ()
if (inputSareEmpty ())
merkelapp.TextContent = 'Alert: Du må angi tall i begge felt.';
komme tilbake;

updatelabel ();

funksjon inputSareEmpty ()
if (getNum1 () === "|| getNum2 () ===")
return True;
annet
return falsk;


funksjon updatelabel ()
var verdi1 = getNum1 ();
var verdi2 = getNum2 ();
var mod = "verdi1" % "verdi2"
merkelapp.textContent = verdi1 + ' %' + verdi2 + '=' + mod;

funksjon getNum1 ()
Returinnganger [0].verdi;

funksjon getNum2 ()
Returinnganger [1].verdi;

HTML -filkode er illustrert nedenfor:

Beregn mod mellom to tall

Angi verdien av utbytte

Skriv inn verdien av divisor

Beregn mod (%)

Utgang fra prosjektet:

Feildeteksjon

Den triste delen er når vi skal kjøre denne koden, den vil vise noen feil for deg. Som du tydelig kan observere i eksemplet nedenfor, når vi setter inn verdiene, er utgangen udefinert i stedet for et faktisk resultat. Så nå må vi oppdage den opprinnelige årsaken til feilen som blir forklart kort i den samme artikkelen senere.

Eksempel

I dette eksemplet skal vi passere verdier som gir den udefinerte utgangen som vist på bildet nedenfor.

Så nå må vi fikse denne feilen raskt. I dette trinnet er hovedmålet vårt å oppdage kilden til feil. For rask oppdagelse av feilen, bør du feilsøke JavaScript -koden i Chrome.

For dette må du kjøre applikasjonen på Chrome, og så må du åpne Devtool ved å trykke på de korte tastene Ctrl+Shift+I. Etter å ha åpnet DevTool, vil du kunne se skjermen vist nedenfor. Foruten mange oppgaver utført av Devtool, kan det også overvåke forespørsler, endre CSS.

Utviklersverktøyoversikt

Du kan feilsøke JavaScript -koden din i kategorien Kildepanel. Den har 3 deler som vist nedenfor:

1. File Navigator Page: Forespørsler om hver fil kan vises i denne fanen.
2. Kodedaktør: Det viser innhold av filinnhold
3. JavaScript feilsøkingsrute: Brukes til å inspisere JavaScript

Kodefeil

Den enkleste måten å feilsøke en feil i koden din er at du må sette inn konsoll.Logg() Funksjon i koden din for å inspisere verdier samtidig.

funksjon updatelabel ()
var verdi1 = getNum1 ();
konsoll.log ('verdi1:', verdi1);
var verdi2 = getNum2 ();
konsoll.Log ('Value2:', Value2);
var mod = parseInt (verdi1) % parseint (verdi2);
konsoll.Logg ('Resultat:', mod);
merkelapp.textContent = verdi1 + ' %' + verdi2 + '=' + mod;

Selv om konsoll.Logg() Funksjon kan være et godt alternativ for å oppdage feilene, men breakpoints kan være et mer effektivt alternativ, da det lar deg pause kode under utførelsen og analysere den tilsvarende verdien. Dessuten er et bruddpunkt bedre enn konsoll.logg () fordi det å jobbe med konsoll.Logg () Du må observere mange trinn som må gjøres manuelt for å se verdier i konsollvinduet mens breakpoints gjør det lettere ved å jobbe direkte.

Innføring av breakpoints i kode

I tilfelle du kommer tilbake og ser på applikasjonens funksjonalitet, vil du bli kjent med at resultatet av modulo -operasjonen ser ut til å være feil etter å ha klikket på "Compute -knappen". Derfor må du sette et pauspunkt før klikkhendelsen.

Hendelseslytter Breakpoints hjelper deg med å finne den spesifikke hendelsen du vil opphøre ved å utvide den tilsvarende gruppen som vist nedenfor. Som bildet tydelig viser at ved å sjekke klikkboksen vil stoppet utførelsen uansett hvor klikklytterhendelsen er til stede.

Gå inn i koden din

Bildet nedenfor illustrerer at hvis du vil stoppe utførelsen av en bestemt linje E.g. Vi sier linje 21, så vil vi klikke på den og observere en blå markør på den spesifikke linjen som sørger for at utførelsen automatisk vil stoppe når den når linje 21.

Oppdage årsaken til en feil

Når vi setter et bruddpunkt på linje 21, noe som betyr at koden alltid tar en pause når utførelsen av koden når den linjen. Når koden er pause på en viss linje, spesifiserer omfangspanelet sine lokale og globale variabler.

Som du ser på bildet nedenfor, er begge verdiene ikke heltall. De er innelukket i sitater som du ser på bildet nedenfor, så vel som modverdi virker også mistenkelig. Endelig oppdages kilden til feilen.

Feilfiksing

Nå kan du endre koden og teste den igjen. Klikk på CV -ikonet som vist til høyre for vindusskjermen. Sett nå ut linje 20 med linjen nevnt nedenfor og lagre endringene.

var mod = parseInt (verdi1) % parseint (verdi2);

Deaktiver deretter bruddpunkter og tester koden med forskjellige verdier for å sjekke de riktige resultatene.

Utgangen på 24%9 er som følger:

Utgangen på 5%3 er som følger:

Konklusjon

JavaScript er det mest populære språket, og behovet øker dag for dag. Nesten overalt brukes JavaScript. I denne artikkelen forklarte vi feilsøking av JavaScript -kode i Chrome. Deretter diskuterte vi hvert trinn. Eksempel på bilder er også gitt for hvert trinn for å hjelpe deg med å forstå.