Felsöka JavaScript i webbläsaren (med exempel)

I den här handledningen lär du dig om felsökning i JavaScript med hjälp av exempel.

Du kan och kommer att stöta på fel när du skriver program. Fel är inte nödvändigtvis dåliga. Faktum är att de oftast hjälper oss att identifiera problem med vår kod. Det är viktigt att du vet hur du felsöker din kod och åtgärdar fel.

Felsökning är processen att undersöka programmet, hitta felet och åtgärda det.

Det finns olika sätt att felsöka ditt JavaScript-program.

1. Använda console.log ()

Du kan använda console.log()metoden för att felsöka koden. Du kan skicka det värde du vill kontrollera i console.log()metoden och verifiera om uppgifterna är korrekta.

Syntaksen är:

 console.log(object/message);

Du kan skicka objektet i console.log()eller helt enkelt en meddelandesträng.

I föregående handledning använde vi console.log()metoden för att skriva ut utdata. Du kan dock också använda den här metoden för felsökning. Till exempel,

 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 )

Använda console.log()metoden i webbläsaren öppnar värdet i felsökningsfönstret.

Arbetar med console.log () -metoden i webbläsaren

Det console.log()är inte specifikt för webbläsare. Den finns också i andra JavaScript-motorer.

2. Använda felsökare

Den debuggernyckelordet stoppar exekvering av koden och anropar felsökning funktionen.

Den debuggerfinns i nästan alla JavaScript-motorer.

Låt oss se ett exempel,

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

Låt oss se hur du kan använda felsökare i en Chrome-webbläsare.

Arbeta med felsökare i webbläsaren

Ovanstående program pausar körningen av programmet i raden som innehåller debugger.

Du kan sedan återuppta flödeskontrollen efter att ha granskat programmet.

Resten av koden körs när du återupptar skriptet genom att trycka på play i konsolen.

Arbeta med felsökare i webbläsaren

3. Ställa in brytpunkter

Du kan ställa in brytpunkter för JavaScript-kod i felsökningsfönstret.

JavaScript slutar köra vid varje brytpunkt och låter dig undersöka värdena. Sedan kan du återuppta körningen av koden.

Låt oss se ett exempel genom att ställa in en brytpunkt i Chrome-webbläsaren.

Arbeta med brytpunkter i webbläsaren

Du kan ställa in brytpunkter genom verktyget för utvecklare var som helst i koden.

Att ställa in brytpunkter liknar att sätta en felsökare i koden. Här ställer du bara in brytpunkter genom att klicka på linjenumret för källkoden istället för att manuellt ringa felsökningsfunktionen.

I ovanstående metoder har vi använt Chrome-webbläsaren för att visa felsökningsprocesserna för enkelhetens skull. Det är dock inte ditt enda alternativ.

Alla bra IDE: er ger dig möjlighet att felsöka koden. Felsökningen kan vara lite annorlunda men konceptet bakom felsökning är detsamma.

Intressanta artiklar...