JavaScript Console.log () Eksempel - Sådan udskrives til konsollen i JS

Logning af meddelelser til konsollen er en meget grundlæggende måde at diagnosticere og foretage fejlfinding på mindre problemer i din kode.

Men vidste du, at der er mere consoleend bare log? I denne artikel viser jeg dig, hvordan du udskriver til konsollen i JS, samt alle de ting, du ikke vidste consolekunne gøre.

Firefox Multi-line Editor Console

Hvis du aldrig har brugt redigeringstilstanden med flere linjer i Firefox, skal du prøve det lige nu!

Bare åbn konsollen, Ctrl+Shift+Keller F12, og øverst til højre vil du se en knap, der siger "Skift til multi-line editor mode". Alternativt kan du trykke på Ctrl+B.

Dette giver dig en multi-line kode editor lige inde i Firefox.

console.log

Lad os starte med et meget grundlæggende logeksempel.

let x = 1 console.log(x)

Skriv det i Firefox-konsollen, og kør koden. Du kan klikke på knappen "Kør" eller trykke på Ctrl+Enter.

I dette eksempel skal vi se "1" i konsollen. Ret ligetil, ikke?

Flere værdier

Vidste du, at du kan inkludere flere værdier? Tilføj en streng til begyndelsen for nemt at identificere, hvad det er, du logger på.

let x = 1 console.log("x:", x)

Men hvad hvis vi har flere værdier, som vi vil logge?

let x = 1 let y = 2 let z = 3

I stedet for at skrive console.log()tre gange kan vi inkludere dem alle. Og vi kan tilføje en streng før hver af dem, hvis vi også vil.

let x = 1 let y = 2 let z = 3 console.log("x:", x, "y:", y, "z:", z)

Men det er for meget arbejde. Bare pakk dem med krøllede seler! Nu får du et objekt med de navngivne værdier.

let x = 1 let y = 2 let z = 3 console.log( {x, y, z} )
Konsol output

Du kan gøre det samme med et objekt.

let user = { name: 'Jesse', contact: { email: '[email protected]' } } console.log(user) console.log({user})

Den første log udskriver egenskaberne inden for brugerobjektet. Den anden identificerer objektet som "bruger" og udskriver egenskaberne i det.

Hvis du logger mange ting på konsollen, kan dette hjælpe dig med at identificere hver log.

Variabler i loggen

Vidste du, at du kan bruge dele af din log som variabler?

console.log("%s is %d years old.", "John", 29)

I dette eksempel %shenviser til en strengindstilling inkluderet efter den oprindelige værdi. Dette vil henvise til "John".

Det %drefererer til et ciffer option inkluderet efter den indledende værdi. Dette refererer til 29.

Resultatet af denne erklæring ville være: "John er 29 år.".

Variationer af logfiler

Der er et par variationer af logfiler. Der er den mest anvendte console.log(). Men der er også:

console.log('Console Log') console.info('Console Info') console.debug('Console Debug') console.warn('Console Warn') console.error('Console Error') 

Disse variationer tilføjer styling til vores logfiler i konsollen. For eksempel vil den warnblive farvet gul, og den errorbliver farvet rød.

Bemærk: Stilarterne varierer fra browser til browser.

Valgfrie logfiler

Vi kan udskrive beskeder til konsollen med console.assert().

let isItWorking = false console.assert(isItWorking, "this is the reason why")

Hvis det første argument er forkert, logges beskeden.

Hvis vi skulle skifte isItWorkingtil true, logges beskeden ikke.

Tæller

Vidste du, at du kan tælle med konsollen?

for(i=0; i<10; i++){ console.count() }

Hver iteration af denne sløjfe udskriver en optælling til konsollen. Du vil se "standard: 1, standard: 2" osv., Indtil den når 10.

Hvis du kører den samme løkke igen, vil du se, at optællingen fortsætter, hvor den slap; 11 - 20.

For at nulstille tælleren kan vi bruge console.countReset().

Og hvis du vil navngive tælleren til noget andet end "standard", kan du!

for(i=0; i<10; i++){ console.count('Counter 1') } console.countReset('Counter 1')

Nu hvor vi har tilføjet en etiket, vil du se "Tæller 1, Tæller 2" osv.

Og for at nulstille denne tæller er vi nødt til at overføre navnet til countReset. På denne måde kan du have flere tællere kørende på samme tid og kun nulstille specifikke.

Spor tid

Udover at tælle kan du også tid noget som et stopur.

For at starte en timer kan vi bruge console.time(). Dette vil ikke gøre noget i sig selv. Så i dette eksempel bruger vi til setTimeout()at efterligne kørsel af kode. Derefter stopper vi vores timer inden for timeout console.timeEnd().

console.time() setTimeout(() => { console.timeEnd() }, 5000)

Som du ville forvente, vil vi efter 5 sekunder have en timerslutlog på 5 sekunder.

We can also log the current time of our timer while it's running, without stopping it. We do this by using console.timeLog().

console.time() setTimeout(() => { console.timeEnd() }, 5000) setTimeout(() => { console.timeLog() }, 2000)

In this example, we will get our 2 second timeLog first, then our 5 second timeEnd.

Just the same as the counter, we can label timers and have multiple running at the same time.

Groups

Another thing that you can do with log is group them. ?

We start a group by using console.group(). And we end a group with console.groupEnd().

console.log('I am not in a group') console.group() console.log('I am in a group') console.log('I am also in a group') console.groupEnd() console.log('I am not in a group')

This group of logs will be collapsible. This makes it easy to identify sets of logs.

By default, the group is not collapsed. You can set it to collapsed by using console.groupCollapsed() in place of console.group().

Labels can also be passed into the group() to better identify them.

Stack Trace

You can also do a stack trace with console. Just add it into a function.

function one() { two() } function two() { three() } function three() { console.trace() } one() 

In this example, we have very simple functions that just call each other. Then, in the last function, we call console.trace().

Konsol output

Tables

Here's one of the most mind-blowing uses for console: console.table().

So let's set up some data to log:

let devices = [ { name: 'iPhone', brand: 'Apple' }, { name: 'Galaxy', brand: 'Samsung' } ]

Now we'll log this data using console.table(devices).

Konsol output

But wait – it gets better!

If we only want the brands, just console.table(devices, ['brand'])!

Konsol output

How about a more complex example? In this example, we'll use jsonplaceholder.

async function getUsers() { let response = await fetch('//jsonplaceholder.typicode.com/users') let data = await response.json() console.table(data, ['name', 'email']) } getUsers()

Here we are just printing the "name" and "email". If you console.log all of the data, you will see that there are many more properties for each user.

Style ?

Did you know that you can use CSS properties to style your logs?

For at gøre dette bruger vi %ctil at specificere, at vi har typografier at tilføje. Stilarterne bliver overført til det andet argument i log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

Du kan bruge dette til at få dine logfiler til at skille sig ud.

Klar

Hvis du prøver at fejlfinde et problem ved hjælp af logfiler, opdaterer du muligvis meget, og din konsol kan blive rodet.

Bare tilføj console.clear()til toppen af ​​din kode, så får du en frisk konsol, hver gang du opdaterer. ?

Bare tilføj det ikke i bunden af ​​din kode, lol.

Tak for læsningen!

Hvis du vil se koncepterne i denne artikel igen via video, kan du tjekke denne videoversion, jeg lavede her.

Jesse Hall (codeSTACKr)

Jeg er Jesse fra Texas. Tjek mit andet indhold, og fortæl mig, hvordan jeg kan hjælpe dig på din rejse til at blive webudvikler.

  • Abonner på min YouTube
  • Sig hej! Instagram | Twitter
  • Tilmeld dig mit nyhedsbrev