Home-theater-designers
Webbrowser-konsollen er et af de mest udbredte værktøjer til fejlfinding af front-end-applikationer. Console API giver udviklere mulighed for at håndtere fejl og logbeskeder.
console.log () er sandsynligvis den mest almindeligt anvendte metode i Console API, men der er også andre metoder, som du kan bruge i din arbejdsgang. Denne vejledning viser dig de forskellige webbrowser -konsolmetoder, du kan bruge til at forbedre din debugging -arbejdsgang.
Hvorfor er logning vigtig?
Logning på webbrowser-konsollen er en af de bedste metoder til fejlfinding af front-end eller JavaScript-baserede applikationer.
Relateret: 6 JavaScript -rammer værd at lære
De fleste moderne webbrowsere understøtter Console API, hvilket gør den let tilgængelig for udviklere. Konsolobjektet er ansvarligt for at give adgang til browserens fejlfindingskonsol. Implementeringen kan være forskellig på tværs af browsere, men de fleste metoder fungerer i alle moderne browsere.
Tip : Din browserkonsol kan køre al kode, der diskuteres i denne vejledning. Trykke F12 på dit tastatur for at åbne browserudviklerens værktøjer i Chrome eller Firefox.
Lognings strengmeddelelser
En af de mest almindelige konsolmetoder er console.log () . Det sender simpelthen en strengbesked eller en vis værdi til webkonsollen. For enkle værdier eller strengbeskeder skal console.log () metode er sandsynligvis den bedste løsning at bruge.
imessage på mac sender ikke beskeder
At udsende a Hej Verden besked, kan du bruge følgende.
console.log(`Hello World`); Et andet særtræk ved console.log () metode er muligheden for at udskrive output fra DOM -elementer eller strukturen på en del af et websted, for eksempel at sende strukturen af kropselementet og alt inde i det bruge følgende.
console.log(document.body) Outputtet er en samling af DOM -elementer som et HTML -træ.
Logning af interaktive JavaScript -objekter
Det console.dir () metode bruges til at logge interaktive egenskaber for JavaScript -objekter. For eksempel kan du bruge den til at se DOM -elementer på en webside.
Den typiske output af console.dir () metoden består af alle egenskaberne for det angivne JavaScript -objekt i JSON -format. Brug metoden herunder til at udskrive egenskaberne for alle elementer i brødteksten på en HTML -side:
console.dir(document.body) Evaluering af udtryk
Du kender muligvis til påstandsmetoder fra enhedstestning - ja console.assert () metode fungerer på en lignende måde. Brug console.assert () metode til at evaluere et udtryk eller en tilstand.
Når assert -metoden fejler, udskriver konsollen en fejlmeddelelse; ellers udskriver det ingenting. Brug nedenstående kode til at vurdere, om en persons alder er over 18 år:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); Påstanden ovenfor mislykkes, og en fejlmeddelelse udskrives i overensstemmelse hermed.
Logning af data i tabeller
Brug console.table () metode til visning af data i tabelformat. Gode kandidater til visning i tabelform omfatter arrays eller objektdata.
Bemærk : Nogle browsere, som Firefox, har en maksimal grænse på 1.000 rækker, der kan vises med console.table () metode.
Forudsat at du har følgende array af bilobjekter:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Du kan vise arrayet ovenfor i en tabel ved hjælp af metoden herunder:
console.table(cars); Logning af meddelelser efter kategori
Webbrowser -konsolbeskeder er hovedsageligt kategoriseret i tre grupper: fejl, advarsel og info.
Fejl
For specifikt at udskrive fejlmeddelelser til konsollen ved hjælp af console.error () metode, vises fejlrelaterede meddelelser med rød skrifttype.
console.error('error message'); Advarsler
Brug følgende for at udskrive advarsler. Som med de fleste scenarier vises advarselsmeddelelser i orange:
console.warn('warning message');Info
For at udskrive generelle oplysninger til konsollen skal du bruge console.info () metode:
console.info('general info message') Det er let at filtrere eller finde meddelelser i browserkonsollen, når de er korrekt kategoriseret.
Sporing af programforløb
Brug console.trace () metode til at udskrive et stackspor af programforløb eller -udførelse. Dette er en meget nyttig funktion til fejlfinding, fordi den udskriver den rækkefølge, som funktioner udføres i dit program.
For at se console.trace () metode i aktion, kan du oprette tre funktioner (som nedenfor) og placere et stackspor i en af funktionerne.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Ring eller udløs i din browserkonsol functionOne () og du får et stackspor af funktionsopkaldene udskrevet i Last In First Out Order (LIFO), fordi det er en stak.
Udførelse af tidsprogram
Hvor lang tid en operation tager at udføre i dit program, kan du bruge console.time () metode. console.time () bruges typisk sammen med console.timeEnd () metode, hvor sidstnævnte bruges til at afslutte timeren.
Du kan have op til 10.000 timere kørende pr. Webside, hvilket understreger vigtigheden af korrekt mærkning af dine timere.
Hvor lang tid det tager for en loop at gå gennem tallene 1 til 50.000, kan du bruge timeren som følger.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Tæller
Det console.count () metode bruges til at holde styr på, hvor mange gange en funktion eller et stykke kode er blevet kaldt i et program. For eksempel kan vi holde styr på antallet af gange, en for loop har udført som følger:
for(i=0; i<4; i++ ){
console.count();
}Gruppering af logbeskeder
Ligesom timermetoden, console.group () , og console.groupEnd () metoder bruges normalt parvis.
Gruppemetoden hjælper dig med bedre at organisere dine logbeskeder. For eksempel kan vi oprette en gruppe advarselsmeddelelser med etiketadvarslerne som følger.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()De to meddelelser i advarselsgruppen er visuelt kategoriseret som vist i output nedenfor.
Rydning af konsollen
Sidst men ikke mindst, her er flere måder, hvorpå du kan slette logbeskeder i din browserkonsol.
Brug console.clear () metode som følger.
console.clear() Du kan også rydde browserkonsollen ved hjælp af browsertastaturgenveje.
Google Chrome : Ctrl + L
Firefox : Ctrl + Shift + L
Brug af browserkonsollen fuldt ud
Denne vejledning har vist dig nogle af de forskellige tilgængelige webbrowser-konsolmetoder til at hjælpe dig med at fejlsøge frontend-applikationer. Konsolens API er meget let, let at lære og bredt understøttet i de fleste moderne browsere.
Spil gamle spil på Windows 10
Lav en CAPTCHA -validering fra dit næste projekt, og sæt dine nye fejlfindingsevner på prøve!
Del Del Tweet E -mail Opret en CAPTCHA -valideringsformular ved hjælp af HTML, CSS og JavaScriptBeskyt dine websteder med CAPTCHA -validering.
Læs Næste Relaterede emner- Programmering
- Web-udvikling
- JavaScript
Mwiza udvikler software efter erhverv og skriver meget om Linux og front-end programmering. Nogle af hans interesser omfatter historie, økonomi, politik og virksomhedsarkitektur.
Mere fra Mwiza KumwendaAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere