Webbläsarkonsolen är ett av de mest använda verktygen för att felsöka front-end-applikationer. Console API ger utvecklare möjligheten att hantera fel och loggmeddelanden.
console.log() är förmodligen den mest använda metoden i Console API, men det finns även andra metoder som du kan använda i ditt arbetsflöde. Den här guiden visar de olika metoderna för webbläsarkonsolen som du kan använda för att förbättra ditt felsökningsarbetsflöde.
Varför är loggning viktigt?
Att logga till webbläsarkonsolen är en av de bästa metoderna för att felsöka front-end eller JavaScript-baserade applikationer.
De flesta moderna webbläsare stöder Console API, vilket gör det lättillgängligt för utvecklare. Konsolobjektet ansvarar för att ge åtkomst till webbläsarens felsökningskonsol. Implementeringen kan skilja sig åt mellan olika webbläsare men de flesta metoder fungerar i alla moderna webbläsare.
Dricks: Din webbläsarkonsol kan köra all kod som diskuteras i den här guiden. Tryck F12 på ditt tangentbord för att öppna webbläsarutvecklarnas verktyg i Chrome eller Firefox.
Logga strängmeddelanden
En av de vanligaste konsolmetoderna är console.log(). Det matar helt enkelt ut ett strängmeddelande eller något värde till webbkonsolen. För enkla värden eller strängmeddelanden, console.log() metoden är förmodligen det bästa alternativet att använda.
Att mata ut a Hej världen meddelande kan du använda följande.
console.log(`Hello World`);
En annan speciell egenskap hos console.log() metod är möjligheten att skriva ut utdata från DOM-element eller strukturen för en del av en webbplats, till exempel för att mata ut strukturen för body-elementet och allt inuti det använda följande.
console.log(document.body)
Utdata är en samling DOM-element som ett HTML-träd.
Logga interaktiva JavaScript-objekt
De console.dir() metod används för att logga interaktiva egenskaper för JavaScript-objekt. Du kan till exempel använda den för att se DOM-elementen på en webbsida.
Den typiska produktionen av console.dir() Metoden består av alla egenskaper för det angivna JavaScript-objektet i JSON-format. Använd metoden nedan för att skriva ut egenskaperna för alla element i brödtexten på en HTML-sida:
console.dir(document.body)
Utvärdera uttryck
Du kanske är bekant med påstå metoder från enhetstestning – ja console.assert() metoden fungerar på liknande sätt. Använd console.assert() metod för att utvärdera ett uttryck eller villkor.
När assertmetoden misslyckas skriver konsolen ut ett felmeddelande; annars skriver den ingenting. Använd koden nedan för att utvärdera om en persons ålder är äldre än 18:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = "You have to be older than 18 years of age";console.assert( yourAge > ageLimit, assertFailMessage);
Påståendet ovan misslyckas och ett felmeddelande skrivs ut i enlighet med detta.
Logga data i tabeller
Använd konsol bord() metod för att visa data i tabellformat. Bra kandidater att visa i tabellform inkluderar arrayer eller objektdata.
Notera: Vissa webbläsare, som Firefox, har en maxgräns på 1 000 rader som kan visas med konsol bord() metod.
Förutsatt att du har följande uppsättning bilobjekt:
let cars = [
{"color":"purple", "type":"minivan", "registration": new Date('2021-04-05')},
{"color": "red", "type":"minivan", "registration": new Date ('2021-06-10')}
]
Du kan visa arrayen ovan i en tabell med metoden nedan:
console.table(cars);
Logga meddelanden efter kategori
Webbläsarkonsolmeddelanden kategoriseras huvudsakligen i tre grupper: fel, varning och info.
Fel
För att specifikt skriva ut felmeddelanden till konsolen med hjälp av console.error() metod visas felrelaterade meddelanden i rött teckensnitt.
console.error('error message');
Varningar
Använd följande för att skriva ut varningar. Som med de flesta scenarier visas varningsmeddelanden i orange:
console.warn('warning message');
Info
För att skriva ut allmän information till konsolen, använd console.info() metod:
console.info('general info message')
Det är lätt att filtrera eller hitta meddelanden i webbläsarkonsolen när de är korrekt kategoriserade.
Spåra programflöde
Använd console.trace() metod för att skriva ut ett stackspår av programflöde eller exekvering. Detta är en mycket användbar funktion för felsökning eftersom den skriver ut i vilken ordning funktionerna körs i ditt program.
Att se console.trace() metod i aktion, kan du skapa tre funktioner (enligt nedan) och placera en stackspårning i en av funktionerna.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}
Ring eller trigg i din webbläsarkonsol functionOne() och du får ett stackspår av funktionsanropen som skrivs ut i Last In First Out Order (LIFO) eftersom det är en stack.
Utförande av timingprogram
För att ta reda på hur lång tid en operation tar att köra i ditt program kan du använda console.time() metod. console.time() används vanligtvis tillsammans med console.timeEnd() metod där den senare används för att avsluta timern.
Du kan ha upp till 10 000 timers igång per webbsida, vilket understryker vikten av att korrekt märka dina timers.
För att tajma hur lång tid det tar för en for-loop att gå igenom siffrorna 1 till 50 000 kan du använda timern enligt följande.
console.time('loop timer 2');
for(i=1; i< 50001; i++){
}
console.timeEnd('loop timer 2');
Räkning
De console.count() metod används för att hålla reda på hur många gånger en funktion eller någon kodbit har anropats i ett program. Till exempel kan vi hålla reda på hur många gånger en for-loop har körts enligt följande:
for(i=0; i<4; i++ ){
console.count();
}
Gruppera loggmeddelanden
Precis som timermetoden är console.group(), och console.groupEnd() metoder används vanligtvis i par.
Gruppmetoden hjälper dig att bättre organisera dina loggmeddelanden. Till exempel kan vi skapa en grupp varningsmeddelanden med etiketten “varningar” enligt följande.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()
De två meddelandena inom varningsgruppen är visuellt kategoriserade enligt utgången nedan.
Rensa konsolen
Sist men inte minst, här är flera sätt på vilka du kan rensa loggmeddelanden i din webbläsarkonsol.
Använd console.clear() metod enligt följande.
console.clear()
Du kan också rensa webbläsarkonsolen med webbläsarens kortkommandon.
Google Chrome: Ctrl + L
Firefox: Ctrl + Shift + L
Använda webbläsarkonsolen till fullo
Den här guiden har visat dig några av de olika tillgängliga webbläsarkonsolmetoderna för att hjälpa dig att felsöka front-end-applikationer. Konsolens API är mycket lätt, lätt att lära sig och stöds brett i de flesta moderna webbläsare.
Gör en CAPTCHA-validering från ditt nästa projekt och testa dina nya felsökningsfärdigheter!
Om författaren
Mwiza Kumwenda (48 artiklar publicerade)
Mwiza utvecklar mjukvara till yrket och skriver mycket om Linux och front-end-programmering. Några av hans intressen inkluderar historia, ekonomi, politik och företagsarkitektur.
Mer från Mwiza Kumwenda
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
