Fejlfinding af JavaScript i browser (med eksempler)

I denne vejledning lærer du om fejlfinding i JavaScript ved hjælp af eksempler.

Du kan og vil støde på fejl, mens du skriver programmer. Fejl er ikke nødvendigvis dårlige. Faktisk hjælper de fleste af tiden os med at identificere problemer med vores kode. Det er vigtigt, at du ved, hvordan du debugger din kode og retter fejl.

Fejlfinding er processen med at undersøge programmet, finde fejlen og rette den.

Der er forskellige måder, du kan fejle dit JavaScript-program på.

1. Brug af console.log ()

Du kan bruge console.log()metoden til at debugge koden. Du kan videregive den værdi, du vil kontrollere, til console.log()metoden og kontrollere, om dataene er korrekte.

Syntaksen er:

 console.log(object/message);

Du kan sende objektet ind console.log()eller blot en meddelelsesstreng.

I den foregående vejledning brugte vi console.log()metode til at udskrive output. Du kan dog også bruge denne metode til fejlfinding. For eksempel,

 let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )

Brug af console.log()metode i browseren åbner værdien i fejlretningsvinduet.

Arbejde med console.log () -metoden i browseren

Det console.log()er ikke specifikt for browsere. Det er også tilgængeligt i andre JavaScript-motorer.

2. Brug af debugger

Den debuggersøgeord stopper udførelsen af koden og kalder debugging-funktionen.

Den debuggerer tilgængelig i næsten alle JavaScript-motorer.

Lad os se et eksempel,

 let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);

Lad os se, hvordan du kan bruge debugger i en Chrome-browser.

Arbejde med debugger i browseren

Ovenstående program sætter programmets afslutning på pause i linjen, der indeholder debugger.

Du kan derefter genoptage flowkontrollen efter at have undersøgt programmet.

Resten af ​​koden udføres, når du genoptager scriptet ved at trykke på play i konsollen.

Arbejde med debugger i browseren

3. Indstilling af breakpoints

Du kan indstille breakpoints for JavaScript-kode i fejlretningsvinduet.

JavaScript stopper udførelsen ved hvert breakpoint og lader dig undersøge værdierne. Derefter kan du genoptage udførelsen af ​​koden.

Lad os se et eksempel ved at indstille et brudpunkt i Chrome-browseren.

Arbejde med breakpoints i browseren

Du kan indstille breakpoints via udviklerværktøjet hvor som helst i koden.

Indstilling af breakpoints svarer til at sætte en debugger i koden. Her indstiller du bare breakpoints ved at klikke på linjenummeret på kildekoden i stedet for manuelt at ringe til fejlfindingsfunktionen.

I ovenstående metoder har vi brugt Chrome-browseren til at vise fejlfindingsprocesser for enkelhed. Det er dog ikke din eneste mulighed.

Alle gode IDE'er giver dig en måde at debugge koden på. Fejlfindingsprocessen kan være lidt anderledes, men konceptet bag fejlfinding er det samme.

Interessante artikler...