Home-theater-designers
Nettleserkonsollen er et av de mest brukte verktøyene for feilsøking av front-end-applikasjoner. Console API gir utviklere muligheten til å håndtere feil og loggmeldinger.
console.log () er sannsynligvis den mest brukte metoden i Console API, men det er også andre metoder du kan bruke i arbeidsflyten din. Denne veiledningen viser deg de forskjellige nettleserkonsollmetodene du kan bruke for å forbedre feilsøkingsarbeidsflyten.
Hvorfor er logging viktig?
Å logge på nettleserkonsollen er en av de beste metodene for feilsøking av front-end eller JavaScript-baserte applikasjoner.
Relatert: 6 JavaScript -rammer som er verdt å lære
De fleste moderne nettlesere støtter Console API, noe som gjør den lett tilgjengelig for utviklere. Konsollobjektet er ansvarlig for å gi tilgang til nettleserens feilsøkingskonsoll. Implementeringen kan være forskjellig på tvers av nettlesere, men de fleste metodene fungerer i alle moderne nettlesere.
Tips : Nettleserkonsollen kan kjøre all koden som er omtalt i denne veiledningen. trykk F12 på tastaturet for å åpne nettleserutviklerens verktøy i Chrome eller Firefox.
Loggstrengmeldinger
En av de vanligste konsollmetodene er console.log () . Det sender ganske enkelt ut en strengmelding eller en verdi til webkonsollen. For enkle verdier eller strengmeldinger, console.log () metoden er sannsynligvis det beste alternativet å bruke.
hvordan fortelle om noen bruker inkognito
For å sende ut a Hei Verden meldingen, kan du bruke følgende.
console.log(`Hello World`); En annen særtrekk ved console.log () metoden er muligheten til å skrive ut utdataene fra DOM -elementer eller strukturen til en del av et nettsted, for eksempel for å skrive ut strukturen til kroppselementet og alt inne i det bruke følgende.
console.log(document.body) Utgangen er en samling av DOM -elementer som et HTML -tre.
Logging av interaktive JavaScript -objekter
De console.dir () metoden brukes for å logge interaktive egenskaper til JavaScript -objekter. For eksempel kan du bruke den til å vise DOM -elementene på en webside.
Den typiske produksjonen av console.dir () metoden består av alle egenskapene til det angitte JavaScript -objektet i JSON -format. Bruk metoden nedenfor for å skrive ut egenskapene til alle elementene i brødteksten på en HTML -side:
console.dir(document.body) Evaluering av uttrykk
Du er kanskje kjent med påstandsmetoder fra enhetstesting - vel console.assert () metoden fungerer på en lignende måte. Bruke console.assert () metode for å evaluere et uttrykk eller en tilstand.
Når påstandsmetoden mislykkes, skriver konsollen ut en feilmelding; ellers skrives det ikke ut. Bruk koden nedenfor for å 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 feilmelding skrives ut deretter.
Logging av data i tabeller
Bruke console.table () metode for å vise data i tabellformat. Gode kandidater å vise i tabellform inkluderer matriser eller objektdata.
Merk : Noen nettlesere, som Firefox, har en maksgrense på 1000 rader som kan vises med console.table () metode.
Forutsatt at du har følgende utvalg av 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 matrisen ovenfor i en tabell ved å bruke metoden nedenfor:
console.table(cars); Logge meldinger etter kategori
Konsollmeldinger i nettleseren er hovedsakelig kategorisert i tre grupper: feil, advarsel og informasjon.
Feil
For å skrive ut feilmeldinger spesifikt til konsollen ved hjelp av console.error () metode, vises feilrelaterte meldinger med rød skrift.
console.error('error message'); Advarsler
Bruk følgende for å skrive ut advarsler. Som med de fleste scenarier vises advarselsmeldinger i oransje:
console.warn('warning message');Info
For å skrive ut generell informasjon til konsollen, bruk console.info () metode:
console.info('general info message') Det er enkelt å filtrere eller finne meldinger i nettleserkonsollen når de er riktig kategorisert.
Sporingsprogramflyt
Bruke console.trace () metode for å skrive ut et stabelspor av programflyt eller kjøring. Dette er en veldig nyttig funksjon for feilsøking fordi den skriver ut rekkefølgen der funksjonene utføres i programmet.
For å se console.trace () metode i aksjon, kan du opprette tre funksjoner (som beskrevet nedenfor) og plassere et stabelspor i en av funksjonene.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Ring eller utløs i nettleserkonsollen functionOne () og du får et stabelspor av funksjonsanropene som skrives ut i Last In First Out Order (LIFO) fordi det er en stabel.
Utførelse av tidsprogram
Til hvor lang tid det tar å utføre en operasjon i programmet, kan du bruke console.time () metode. console.time () brukes vanligvis sammen med console.timeEnd () metode der sistnevnte brukes til å avslutte timeren.
Du kan ha opptil 10 000 tidtakere som kjører per nettside, og understreker viktigheten av å merke timerne riktig.
Til hvor lang tid det tar for en loop å gå gjennom tallene 1 til 50.000, kan du bruke timeren som følger.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Teller
De console.count () metoden brukes til å holde oversikt over hvor mange ganger en funksjon eller et stykke kode er blitt kalt i et program. For eksempel kan vi holde oversikt over antall ganger en for loop har utført som følger:
for(i=0; i<4; i++ ){
console.count();
}Gruppering av loggmeldinger
Akkurat som timermetoden, console.group () , og console.groupEnd () metoder brukes vanligvis i par.
Gruppemetoden hjelper deg med å organisere loggmeldingene bedre. For eksempel kan vi opprette en gruppe advarselsmeldinger med etiketten advarsler som følger.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()De to meldingene i advarselsgruppen er visuelt kategorisert som vist i utdataene nedenfor.
Rydder konsollen
Sist men ikke minst, her er flere måter du kan slette loggmeldinger på i nettleserkonsollen.
Bruke console.clear () metoden som følger.
console.clear() Du kan også slette nettleserkonsollen ved hjelp av hurtigtaster i nettleseren.
Google Chrome : Ctrl + L
Firefox : Ctrl + Shift + L
Å bruke nettleserkonsollen til det fulle
Denne veiledningen har vist deg noen av de forskjellige tilgjengelige nettleserkonsollmetodene for å hjelpe deg med å feilsøke front-end-applikasjoner. Konsoll -API -en er veldig lett, lett å lære og støttes bredt i de fleste moderne nettlesere.
kritisk prosess døde windows 10 loop
Lag en CAPTCHA -validering fra ditt neste prosjekt, og sett dine nye feilsøkingsferdigheter på prøve!
Dele Dele kvitring E -post Lag et CAPTCHA -valideringsskjema ved hjelp av HTML, CSS og JavaScriptSikre nettstedene dine med CAPTCHA -validering.
Les neste Relaterte temaer- Programmering
- Webutvikling
- JavaScript
Mwiza utvikler programvare etter yrke og skriver mye om Linux og front-end programmering. Noen av hans interesser inkluderer historie, økonomi, politikk og virksomhetsarkitektur.
Mer fra Mwiza KumwendaAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
Klikk her for å abonnere