JavaScripti Console.log () näide - kuidas JS-is konsooli printida

Sõnumite konsooli logimine on väga lihtne viis koodis esinevate väikeste probleemide diagnoosimiseks ja tõrkeotsinguks.

Kuid kas teadsite, et on midagi enamat consolekui lihtsalt log? Selles artiklis näitan teile, kuidas printida JS-i konsoolile, samuti kõiki asju, mida te ei consoleosanud teha.

Firefoxi mitme rea redaktori konsool

Kui te pole kunagi Firefoxis mitmerealist redaktorirežiimi kasutanud, peaksite seda kohe proovima!

Avage lihtsalt konsool Ctrl+Shift+Kvõi F12, ja paremas ülanurgas näete nuppu, mis ütleb "Lülitu mitmerealisele redaktorirežiimile". Teise võimalusena võite vajutada Ctrl+B.

See annab teile mitmerealise koodiredaktori otse Firefoxis.

konsool.log

Alustame väga elementaarsest loginäitest.

let x = 1 console.log(x)

Sisestage see Firefoxi konsooli ja käivitage kood. Võite klõpsata nupul "Käivita" või vajutada Ctrl+Enter.

Selles näites peaksime konsoolis nägema "1". Päris sirgjooneline, eks?

Mitu väärtust

Kas teadsite, et saate lisada mitu väärtust? Lisage stringi algusesse, et hõlpsasti tuvastada, mis te logite.

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

Aga mis siis, kui meil on mitu väärtust, mida tahame logida?

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

console.log()Kolm korda tippimise asemel võime need kõik lisada. Ja soovi korral võime igaühe ette lisada ka stringi.

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

Kuid see on liiga palju tööd. Pange need lihtsalt lokkis traksidega! Nüüd saate objekti nimega väärtustega.

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

Objektiga saate teha sama asja.

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

Esimene logi prindib kasutajaobjekti atribuudid. Teine tuvastab objekti "kasutajana" ja prindib selles olevad atribuudid.

Kui logite konsooli palju asju, aitab see teil iga logi tuvastada.

Muutujad logis

Kas teadsite, et saate muutujana kasutada oma logi osi?

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

Selles näites %sviitab stringivalikule, mis lisatakse pärast algväärtust. See viitaks "Johnile".

%dViitab kohaline võimalus lisada pärast esialgset väärtust. See viitaks 29-le.

Selle väite väljund oleks: "John on 29-aastane.".

Palkide variatsioonid

Palke on paar variatsiooni. Seal on kõige laialdasemalt kasutatav console.log(). Kuid on ka:

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

Need variatsioonid lisavad konsoolis meie logidele stiili. Näiteks on test warnvärv kollane ja errorpunane.

Märkus. Stiilid on brauseriti erinevad.

Valikulised logid

Saame konsoolile sõnumeid printida tingimuslikult console.assert().

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

Kui esimene argument on vale, logitakse sõnum.

Kui me peaksime ümber isItWorkingminema true, siis sõnumit ei logita.

Loendamine

Kas teadsite, et saate konsooliga arvestada?

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

Selle tsükli iga iteratsioon trükib konsooli loenduse. Näete "default: 1, default: 2" ja nii edasi, kuni see jõuab 10-ni.

Kui käivitate selle sama tsükli uuesti, näete, et arv jätkab sealt, kus pooleli jäi; 11–20.

Loenduri lähtestamiseks saame seda kasutada console.countReset().

Ja kui soovite loenduri nimetada muuks kui "vaikimisi", saate seda teha!

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

Nüüd, kui oleme sildi lisanud, näete "Counter 1, Counter 2" jne.

Ja selle loenduri lähtestamiseks peame selle nime edastama countReset. Nii saate korraga töötada mitu loendurit ja lähtestada ainult kindlad.

Jälgi aega

Lisaks loendamisele saate ajastada ka stopperi taolist.

Taimeri käivitamiseks saame seda kasutada console.time(). See ei tee iseenesest midagi. Nii et selles näites kasutame setTimeout()koodi käitamise jäljendamist. Seejärel peatame ajalõpu ajal taimeri kasutamise console.timeEnd().

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

Nagu arvata võib, on meil 5 sekundi pärast taimeri lõpulogi 5 sekundit.

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

Konsooli väljund

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

Konsooli väljund

But wait – it gets better!

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

Konsooli väljund

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?

Selleks %ctäpsustame, et meil on stiilid, mida lisada. Stiilid viiakse teise argumenti log.

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

Seda saate kasutada oma logide eristamiseks.

Selge

Kui proovite logide abil probleemi lahendada, võite värskendada palju ja teie konsool võib olla segamini.

Lihtsalt lisage console.clear()oma koodi ülaossa ja teil on värskendamise ajal uus konsool. ?

Lihtsalt ärge lisage seda oma koodi lõppu, lol.

Täname lugemast!

Kui soovite selle artikli mõisteid video kaudu uuesti vaadata, saate tutvuda selle minu tehtud videoversiooniga siin.

Jesse Hall (codeSTACKr)

Olen Jesse Texasest. Vaadake minu muud sisu ja andke mulle teada, kuidas saan teid aidata teie veebiarendajaks saamisel.

  • Telli Minu YouTube
  • Ütle Tere! Instagram | Twitter
  • Registreeru minu uudiskirja saamiseks