Primjer JavaScript Console.log () - Kako ispisati na konzolu u JS-u

Zapisivanje poruka na konzolu vrlo je osnovni način dijagnosticiranja i rješavanja manjih problema u kodu.

Ali, jeste li znali da postoji više consoleod samo log? U ovom ću vam članku pokazati kako ispisivati ​​na konzolu u JS-u, kao i sve stvari za koje niste znali consoleda mogu.

Konzola za višeredni uređivač Firefox

Ako u Firefoxu nikada niste koristili način višerednog uređivača, trebali biste odmah isprobati!

Samo otvorite konzolu Ctrl+Shift+Kili F12, i u gornjem desnom kutu vidjet ćete gumb na kojem piše "Prebaci se u način rada s više linija". Možete i pritisnuti Ctrl+B.

To vam daje uređivač koda s više redaka unutar Firefoxa.

konzola.log

Počnimo s vrlo osnovnim primjerom dnevnika.

let x = 1 console.log(x)

Upišite to u Firefox konzolu i pokrenite kôd. Možete kliknuti gumb "Pokreni" ili pritisnuti Ctrl+Enter.

U ovom primjeru trebali bismo vidjeti "1" u konzoli. Prilično izravno, zar ne?

Više vrijednosti

Jeste li znali da možete uključiti više vrijednosti? Na početak dodajte niz da biste lako prepoznali što zapisujete.

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

Ali što ako imamo više vrijednosti koje želimo prijaviti?

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

Umjesto da tipkamo console.log()tri puta, možemo ih sve uključiti. A možemo dodati i niz prije svakog od njih ako smo htjeli.

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

Ali to je previše posla. Samo ih zamotajte kovrčavim zagradama! Sada dobivate objekt s imenovanim vrijednostima.

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

To isto možete učiniti i s objektom.

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

Prvi zapisnik ispisat će svojstva unutar korisničkog objekta. Drugi će identificirati objekt kao "korisnik" i ispisati svojstva u njemu.

Ako na konzolu bilježite mnoge stvari, ovo vam može pomoći da identificirate svaki zapisnik.

Varijable unutar dnevnika

Jeste li znali da dijelove dnevnika možete koristiti kao varijable?

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

U ovom se primjeru %sodnosi na opciju niza koja je uključena nakon početne vrijednosti. To bi se odnosilo na "Ivana".

%dOdnosi na opciju znamenki uključena nakon početne vrijednosti. To bi se odnosilo na 29.

Rezultat ove izjave bio bi: "John ima 29 godina.".

Varijacije trupaca

Postoji nekoliko varijacija trupaca. Tu se najviše koristi console.log(). Ali tu je i:

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

Te varijacije dodaju stil našim zapisnicima u konzoli. Na primjer, oporuka warnće biti obojena žutom bojom, a errorolovka crveno.

Napomena: Stilovi se razlikuju od preglednika do preglednika.

Neobvezni zapisnici

Poruke na konzolu možemo ispisati uvjetno pomoću console.assert().

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

Ako je prvi argument netačan, tada će se poruka zabilježiti.

Ako bismo promijenili isItWorkingna true, tada poruka neće biti zabilježena.

Brojanje

Jeste li znali da s konzolom možete računati?

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

Svaka iteracija ove petlje ispisat će broj na konzolu. Vidjet ćete "default: 1, default: 2" i tako dalje dok ne dosegne 10.

Ako ponovo pokrenete istu petlju, vidjet ćete da brojanje nastavlja tamo gdje je stalo; 11 - 20 (prikaz, stručni).

Da resetiramo brojač koji možemo koristiti console.countReset().

A ako želite brojač imenovati nečim drugim, a ne "zadanim", možete!

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

Sad kad smo dodali oznaku, vidjet ćete "Brojač 1, Brojač 2" itd.

A da bismo resetirali ovaj brojač, moramo mu prenijeti ime countReset. Na ovaj način možete istovremeno pokretati nekoliko brojača i resetirati samo one određene.

Vrijeme praćenja

Osim brojanja, možete odrediti i vrijeme poput štoperice.

Da bismo pokrenuli tajmer koji možemo koristiti console.time(). Ovo neće učiniti samo po sebi. Dakle, u ovom primjeru ćemo koristiti setTimeout()za oponašanje pokrenutog koda. Tada ćemo, u roku isteka vremena, zaustaviti upotrebu našeg timera console.timeEnd().

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

Kao što ste i očekivali, nakon 5 sekundi imat ćemo dnevnik završetka odbrojavanja od 5 sekundi.

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().

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).

But wait – it gets better!

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

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?

Da bismo to učinili, koristimo %cda odredimo da imamo stilove za dodavanje. Stilovi se prenose u drugi argument log.

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

Pomoću ovoga možete istaknuti svoje zapisnike.

Čisto

Ako pokušavate riješiti problem pomoću dnevnika, možda se puno osvježavate i vaša će se konzola pretrpati.

Samo dodajte console.clear()na vrh koda i imat ćete svježu konzolu svaki put kad se osvježite. ?

Samo ga nemojte dodavati na dno koda, hahaha.

Hvala na čitanju!

Ako želite ponovno pregledati koncepte u ovom članku putem videa, možete pogledati ovu video-verziju koju sam ovdje napravio.

Ja sam Jesse iz Teksasa. Pogledajte moj drugi sadržaj i javite mi kako vam mogu pomoći na vašem putu da postanete web programer.

• Pretplatite se na moj YouTube
• Reci zdravo! Instagram | Cvrkut
• Prijavite se za moj bilten