Home-theater-designers
Webbläsarkonsolen är ett av de mest använda verktygen för felsökning av front-end-applikationer. Console API ger utvecklare möjlighet att hantera fel och loggmeddelanden.
console.log () är förmodligen den vanligaste metoden i Console API, men det finns också andra metoder som du kan använda i ditt arbetsflöde. Den här guiden visar de olika webbläsarkonsolmetoderna som du kan använda för att förbättra ditt felsökningsflöde.
Varför är det viktigt att logga?
Logga in på webbläsarkonsolen är en av de bästa metoderna för att felsöka front-end eller JavaScript-baserade applikationer.
Relaterat: 6 JavaScript -ramverk värda att lära sig
De flesta moderna webbläsare stöder Console API, vilket gör den lätt tillgänglig för utvecklare. Konsolobjektet ansvarar för att ge åtkomst till webbläsarens felsökningskonsol. Implementeringen kan vara olika mellan 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å tangentbordet för att öppna webbläsarutvecklarens 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 () metod är förmodligen det bästa alternativet att använda.
vänd video i Windows Media Player
För att mata ut a Hej världen meddelande kan du använda följande.
console.log(`Hello World`); En annan särdrag hos console.log () metoden är möjligheten att skriva ut utmatningen av DOM -element eller strukturen på en del av en webbplats, till exempel för att mata ut strukturen för kroppselementet och allt inuti det använda följande.
console.log(document.body) Utdata är en samling av 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 visa DOM -elementen på en webbsida.
Den typiska utsignalen för 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 en HTML -sida:
console.dir(document.body) Utvärdering av uttryck
Du kanske är bekant med påståendemetoder från enhetstester - ja console.assert () metoden fungerar på ett liknande sätt. Använd console.assert () metod för att utvärdera ett uttryck eller tillstånd.
När påståendemetoden misslyckas skriver konsolen ut ett felmeddelande. annars skriver det ingenting. Använd koden nedan för att utvärdera om en persons ålder är högre ä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 därefter.
Logga data i tabeller
Använd konsol bord() metod för att visa data i tabellformat. Bra kandidater att visa i tabellform inkluderar matriser 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 matrisen ovan i en tabell med hjälp av metoden nedan:
console.table(cars); Logga meddelanden efter kategori
Meddelanden i webbläsarens konsol kategoriseras huvudsakligen i tre grupper: fel, varning och information.
Fel
För att specifikt skriva ut felmeddelanden till konsolen med console.error () metod visas felrelaterade meddelanden med 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 enkelt att filtrera eller hitta meddelanden i webbläsarkonsolen när de är korrekt kategoriserade.
Spårningsprogramflöde
Använd console.trace () metod för att skriva ut ett stapelspår av programflöde eller körning. Detta är en mycket användbar funktion för felsökning eftersom den skriver ut ordningen i vilken funktioner körs i ditt program.
För att se console.trace () metod i aktion kan du skapa tre funktioner (enligt nedan) och placera en stapelspårning i en av funktionerna.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Ring eller trigga i din webbläsarkonsol functionOne () och du får ett stapelspår av funktionssamtalen som skrivs ut i Last In First Out Order (LIFO) eftersom det är en stapel.
Utförande av tidsprogram
Hur lång tid det tar att genomföra en operation 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 som körs per webbsida, vilket betonar vikten av att korrekt märka dina timers.
Hur lång tid det tar för en 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 utförts enligt följande:
for(i=0; i<4; i++ ){
console.count();
}Gruppera loggmeddelanden
Precis som timermetoden, 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 etikettvarningarna enligt följande.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()De två meddelandena inom varningsgruppen kategoriseras visuellt enligt utmatningen 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 kortkommandon i webbläsaren.
Google Chrome : Ctrl + L
Firefox : Ctrl + Skift + L
Använda webbläsarkonsolen till fullo
Den här guiden har visat dig några av de olika tillgängliga webbläsarkonsolmetoderna som hjälper dig att felsöka front-end-applikationer. Konsolens API är mycket lätt, lätt att lära sig och stöds i stor utsträckning i de flesta moderna webbläsare.
hur man laddar bärbar dator från Dell utan laddare
Gör en CAPTCHA -validering från ditt nästa projekt och testa dina nya felsökningsförmågor!
Dela med sig Dela med sig Tweet E-post Skapa ett CAPTCHA -verifieringsformulär med HTML, CSS och JavaScriptSkydda dina webbplatser med CAPTCHA -validering.
Läs Nästa Relaterade ämnen- Programmering
- Webbutveckling
- JavaScript
Mwiza utvecklar programvara efter yrke 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 KumwendaPrenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
Klicka här för att prenumerera