JavaScript Console.log () -esimerkki - Kuinka tulostaa konsolille JS: ssä

Viestien kirjaaminen konsoliin on hyvin yksinkertainen tapa diagnosoida ja ratkaista koodin pieniä ongelmia.

Mutta tiesitkö, että on enemmän consolekuin vain log? Tässä artikkelissa näytän sinulle, kuinka voit tulostaa konsolille JS: ssä, samoin kuin kaikki asiat, joita et tiennyt console.

Firefoxin monirivinen muokkauskonsoli

Jos et ole koskaan käyttänyt monirivistä muokkaustilaa Firefoxissa, kokeile sitä heti!

Avaa vain konsoli Ctrl+Shift+Ktai F12, ja oikeassa yläkulmassa näet painikkeen, jossa lukee "Vaihda moniriviseen muokkaustilaan". Vaihtoehtoisesti voit painaa Ctrl+B.

Tämä antaa sinulle monirivisen koodieditorin aivan Firefoxin sisällä.

console.log

Aloitetaan hyvin perustavasta loki-esimerkistä.

let x = 1 console.log(x)

Kirjoita se Firefox-konsoliin ja suorita koodi. Voit napsauttaa "Suorita" -painiketta tai painaa Ctrl+Enter.

Tässä esimerkissä meidän pitäisi nähdä "1" konsolissa. Melko suoraviivainen, eikö?

Useita arvoja

Tiesitkö, että voit sisällyttää useita arvoja? Lisää merkkijono alkuun, jotta voit helposti tunnistaa, mitä kirjaat.

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

Mutta entä jos meillä on useita arvoja, jotka haluamme kirjautua sisään?

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

console.log()Kolmen kerran kirjoittamisen sijaan voimme sisällyttää ne kaikki. Ja voimme lisätä merkkijonon jokaisen eteen, jos haluamme.

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

Mutta se on liikaa työtä. Kääri ne vain kiharoilla! Nyt saat objektin, jolla on nimetyt arvot.

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

Voit tehdä saman asian esineellä.

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

Ensimmäinen loki tulostaa käyttäjäobjektin ominaisuudet. Toinen tunnistaa objektin "käyttäjäksi" ja tulostaa sen ominaisuudet.

Jos kirjaat monia asioita konsoliin, se voi auttaa sinua tunnistamaan kukin loki.

Muuttujat lokissa

Tiesitkö, että voit käyttää lokisi osia muuttujina?

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

Tässä esimerkissä %sviittaa merkkijonovaihtoehtoon alkuperäisen arvon jälkeen. Tämä viittaa "Johniin".

%dViittaa numero vaihtoehto sisältyy jälkeen alkuarvo. Tämä viittaa 29: een.

Tämän lausunnon tulos olisi: "John on 29-vuotias.".

Lokien muunnelmat

Lokeista on muutamia muunnelmia. On eniten käytetty console.log(). Mutta on myös:

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

Nämä muunnelmat lisäävät tyyliä lokissamme olevaan konsoliin. Esimerkiksi warntestamentti on väriltään keltainen ja errorpunainen.

Huomaa: Tyylit vaihtelevat selaimittain.

Valinnaiset lokit

Voimme tulostaa viestejä konsolille ehdollisesti console.assert().

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

Jos ensimmäinen argumentti on väärä, viesti kirjataan.

Jos haluaisimme vaihtaa isItWorkingosoitteeseen true, viestiä ei kirjata.

Laskenta

Tiesitkö, että voit laskea konsolilla?

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

Jokainen tämän silmukan iterointi tulostaa määrän konsolille. Näet "oletus: 1, oletus: 2" ja niin edelleen, kunnes se saavuttaa 10.

Jos suoritat saman silmukan uudelleen, huomaat, että laskenta jatkuu siitä, mihin se jäi. 11-20.

Laskurin nollaamiseksi voimme käyttää console.countReset().

Ja jos haluat nimetä laskurin jollekin muulle kuin "oletukselle", voit!

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

Nyt kun olemme lisänneet etiketin, näet "Laskuri 1, Laskuri 2" ja niin edelleen.

Ja tämän laskurin nollaamiseksi meidän on annettava nimi countReset. Näin voit saada useita laskureita toimimaan samanaikaisesti ja nollata vain tietyt.

Seuraa aikaa

Laskemisen lisäksi voit myös ajastaa jotain sekuntikelloa.

Käynnistämme ajastimen, jota voimme käyttää console.time(). Tämä ei tee mitään itsestään. Joten tässä esimerkissä käytämme setTimeout()jäljittelemään koodia. Sitten aikakatkaisun aikana lopetamme ajastimen käytön console.timeEnd().

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

Kuten voit odottaa, viiden sekunnin kuluttua ajastimen loppuloki on 5 sekuntia.

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?

Tätä varten %cmääritämme, että meillä on lisättäviä tyylejä. Tyylit siirtyvät log.

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

Tämän avulla voit tehdä lokistasi erottuvan.

Asia selvä

Jos yrität ratkaista ongelmaa lokien avulla, saatat olla virkistävä paljon ja konsoli voi olla sotkuinen.

Lisää console.clear()vain koodisi yläosaan ja sinulla on uusi konsoli joka kerta kun päivität. ?

Älä vain lisää sitä koodisi loppuun, lol.

Kiitos lukemisesta!

Jos haluat palata tämän artikkelin käsitteisiin videon kautta, voit tutustua tähän tekemäni videoversioon täällä.

Olen Jesse Texasista. Tarkista muu sisältöni ja kerro minulle, kuinka voin auttaa sinua matkallasi tulemaan web-kehittäjäksi.

• Tilaa Oma YouTube
• Sano Hei! Instagram | Viserrys
• Tilaa uutiskirje