Logging av meldinger til konsollen er en veldig enkel måte å diagnostisere og løse mindre problemer i koden din.
Men, visste du at det er mer til console enn bare log? I denne artikkelen vil jeg vise deg hvordan du skriver ut til konsollen i JS, så vel som alle ting du ikke visste console kunne gjøre.
Firefox Multi-line Redaktør Konsoll
Hvis du aldri har brukt multi-line editor-modus i Firefox, du bør gi den en prøve akkurat nå!,
Bare åpne konsollen, Ctrl+Shift+K eller F12, og øverst til høyre vil du se en knapp som sier «Slå til multi-line editor mode». Alternativt, du kan trykke på Ctrl+B.
Dette gir deg en multi-linje kode editor rett i Firefox.
– konsollen.logg på
La oss starte med en svært grunnleggende logg eksempel.
let x = 1console.log(x)Skriv det inn i Firefox-konsollen og kjøre koden. Du kan klikke på «Kjør» – knappen, eller trykk Ctrl+Enter.
I dette eksemplet, vi skal se «1» i konsollen., Ganske enkelt, ikke sant?
Flere Verdier
Visste du at du kan inkludere flere verdier? Legg til en string til begynnelsen for å enkelt identifisere hva det er du logger deg.
let x = 1console.log("x:", x)Men hva hvis vi har flere verdier som vi ønsker å logge deg?
let x = 1let y = 2let z = 3i Stedet for å skrive console.log() tre ganger kan vi inkludere dem alle. Og vi kan legge til en streng før hver av dem hvis vi ønsket, også.
let x = 1let y = 2let z = 3console.log("x:", x, "y:", y, "z:", z)Men det er for mye arbeid. Bare pakk dem med krøllparentes!, Nå kan du få et objekt med navnet verdier.
let x = 1let y = 2let z = 3console.log( {x, y, z} )Du kan gjøre det samme med et objekt.
let user = { name: 'Jesse', contact: { email: '[email protected]' }}console.log(user)console.log({user})Den første logg ut eiendommer i brukerens objekt. Den andre vil identifisere objektet som «bruker» og skriv ut egenskapene i det.
Hvis du er logget mange ting til konsollen, kan dette hjelpe deg til å identifisere hver enkelt stokk.
Variabler innenfor logg på
Visste du at du kan bruke deler av loggen som variabler?,
console.log("%s is %d years old.", "John", 29)I dette eksempelet, %s refererer til en streng alternativet følger etter den første verdien. Dette vil henvise til «John».
%d refererer til et siffer alternativet følger etter den første verdien. Dette vil henvise til 29.
resultatet av denne erklæringen skulle være: «Johannes er 29 år gammel.».
Varianter av logger
Det er noen varianter av logger. Det er den mest brukte console.log(). Men det er også:
Disse variasjonene legge til styling til loggene våre i konsollen., For eksempel, warn vil være farget gult, og error vil være farget rød.
Merk: stilene varierer fra nettleser til nettleser.
Valgfritt Logger
Vi kan skrive meldinger til konsollen betinget med console.assert().
let isItWorking = falseconsole.assert(isItWorking, "this is the reason why")Hvis det første argumentet er feil, da meldingen vil bli logget.
Hvis vi skulle endre isItWorking til true, deretter meldingen ikke vil bli logget.
Teller
Visste du at du kan regne med konsollen?,
for(i=0; i<10; i++){ console.count()}Hver iterasjon av denne sløyfen vil skrive ut en teller til konsollen. Du vil se «standard: 1, standard: 2», og så videre helt til den når 10.
Hvis du kjører den samme loopen igjen vil du se at count plukker opp der den slapp; 11 – 20.
for Å nullstille telleren vi kan bruke console.countReset().
hvis du ønsker å nevne telleren til noe annet enn «standard», det kan du!
for(i=0; i<10; i++){ console.count('Counter 1')}console.countReset('Counter 1')Nå som vi har lagt til en etikett, vil du se «Counter-1, Mot 2», og så videre.,
Og for å tilbakestille denne telleren, har vi å passere navn i countReset. På denne måten kan du ha flere tellere som kjører på samme tid, og bare tilbakestille bestemte seg.
Spore Tid
i Tillegg til å telle, du kan også tid noe som en stoppeklokke.
for Å starte en tidtaker som vi kan bruke console.time(). Dette vil ikke gjøre noe av seg selv. Så, i dette eksemplet bruker vi setTimeout() for å etterligne kode kjører. Deretter, i timeout, vi vil stoppe tidtakeren ved hjelp av console.timeEnd().,
console.time()setTimeout(() => { console.timeEnd()}, 5000)Som du ville forvente, etter 5 sekunder, vil vi ha et tidsur slutten logg på 5 sekunder.
Vi kan også logge gjeldende tid på våre timer mens den kjører, uten å stoppe det. Vi gjør dette ved å bruke console.timeLog().
console.time()setTimeout(() => { console.timeEnd()}, 5000)setTimeout(() => { console.timeLog()}, 2000)I dette eksempelet vil vi få våre 2 andre timeLog første, så vår 5 andre timeEnd.
Akkurat det samme som teller, vi kan merke tidtakere og har flere kjører på samme tid.,
Grupper
en Annen ting som du kan gjøre med log er gruppere dem. ?
Vi starte en gruppe ved å bruke console.group(). Og vi avslutter en gruppe med console.groupEnd().
Denne gruppen av logger vil være sammenleggbare. Dette gjør det lett å identifisere sett av logger.
standard konsernet er ikke kollapset. Du kan sette den til å kollapset ved å bruke console.groupCollapsed() i stedet for console.group().
Etiketter kan også bli vedtatt i group() for å bedre identifisere dem.,
Stabel Spore
Du kan også gjøre en stack trace med console. Det er bare å legge det inn i en funksjon.
function one() { two()}function two() { three()}function three() { console.trace()}one()I dette eksempel har vi svært enkle funksjoner som bare ringe til hverandre. Så, i de siste funksjonen, som vi kaller console.trace().
Tabeller
Her er en av de mest halsbrekkende bruker for konsollen: console.table().,
Så la oss sette opp noen data til å logge:
let devices = Nå skal vi logge denne data ved hjelp av console.table(devices).
Men vent – det blir bedre!
Hvis vi bare ønsker merkevarer, bare console.table(devices, )!
Hvordan er det med et mer komplisert eksempel? I dette eksemplet vil vi bruke jsonplaceholder.
Her er vi bare skrive «navn» og «e-post»., Hvis du console.log alle data, vil du se at det er mange flere egenskaper for hver bruker.
Stil ?
Visste du at du kan bruke CSS-egenskaper til stil loggene?
for Å gjøre dette, bruker vi %c for å angi at vi har stiler å legge til. Stiler få bestått i det andre argumentet til log.
console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")Du kan bruke dette for å gjøre ditt logger skiller seg ut.,
Slett
Hvis du prøver å feilsøke et problem ved hjelp av logger, du kan være forfriskende mye og konsollen kan bli rotete.
Bare legge til console.clear() til toppen av koden din og du vil ha en frisk konsollen hver gang du oppdaterer. ?
Bare ikke legge den til bunnen av koden, lol.
Takk for at du Leser!
Hvis du ønsker å komme tilbake til begrepene i denne artikkelen via video, kan du sjekke ut denne videoen-versjonen jeg har gjort her.,
jeg Jesse fra Texas. Sjekk ut mine andre innholdet og la meg vite hvordan jeg kan hjelpe deg på reisen din til å bli en web-utvikler.
- Abonnere på Min YouTube
- Si Hei! Instagram | Twitter
- Registrer deg For Mine Nyhetsbrev