JavaScript Console.log () piemērs - kā drukāt uz konsoli JS

Ziņojumu reģistrēšana konsolē ir ļoti vienkāršs veids, kā diagnosticēt un novērst nelielas koda problēmas.

Bet vai zinājāt, ka ir vairāk consolenekā tikai log? Šajā rakstā es jums parādīšu, kā drukāt konsolē JS, kā arī visas lietas, kuras jūs nezināt, ko consolevarētu darīt.

Firefox daudzrindu redaktora konsole

Ja jūs nekad neesat izmantojis vairākrindu redaktora režīmu pārlūkprogrammā Firefox, jums to vajadzētu izmēģināt tūlīt!

Vienkārši atveriet konsoli Ctrl+Shift+Kvai F12, un augšējā labajā stūrī redzēsit pogu ar tekstu "Pārslēgties uz vairākrindu redaktora režīmu". Varat arī nospiest Ctrl+B.

Tas nodrošina daudzrindu kodu redaktoru tieši Firefox iekšpusē.

console.log

Sāksim ar ļoti vienkāršu žurnāla piemēru.

let x = 1 console.log(x)

Ierakstiet to Firefox konsolē un palaidiet kodu. Jūs varat noklikšķināt uz pogas "Palaist" vai nospiest Ctrl+Enter.

Šajā piemērā mums konsolē vajadzētu redzēt “1”. Diezgan vienkārši, vai ne?

Vairākas vērtības

Vai zinājāt, ka varat iekļaut vairākas vērtības? Pievienojiet virknei sākumu, lai viegli identificētu, ko jūs reģistrējat.

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

Bet ko tad, ja mums ir vairākas vērtības, kuras mēs vēlamies reģistrēt?

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

Tā vietā, lai rakstītu console.log()trīs reizes, mēs varam iekļaut tos visus. Un pirms katra no tiem mēs varam pievienot virkni, ja arī mēs to vēlamies.

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

Bet tas ir pārāk daudz darba. Vienkārši aptiniet tos ar cirtainiem stiprinājumiem! Tagad jūs saņemat objektu ar nosauktajām vērtībām.

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

Jūs varat darīt to pašu ar objektu.

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

Pirmais žurnāls izdrukās lietotāja objekta rekvizītus. Otrais identificēs objektu kā "lietotāju" un izdrukās tajā esošās īpašības.

Ja reģistrējat daudzas lietas konsolē, tas var palīdzēt identificēt katru žurnālu.

Mainīgie žurnālā

Vai zinājāt, ka kā mainīgos varat izmantot sava žurnāla daļas?

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

Šajā piemērā %sattiecas uz virknes opciju, kas iekļauta aiz sākotnējās vērtības. Tas attiektos uz "Jāni".

%dAttiecas uz ciparu iespēju iekļautas pēc sākotnējās vērtības. Tas attiektos uz 29.

Šī paziņojuma iznākums būtu šāds: "Džonam ir 29 gadi.".

Baļķu variācijas

Ir dažas žurnālu variācijas. Tur ir visplašāk izmantotais console.log(). Bet ir arī:

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

Šīs variācijas pievieno stilu mūsu žurnāliem konsolē. Piemēram, warntestaments būs dzeltenā krāsā un errorsarkanā krāsā.

Piezīme. Katrā pārlūkprogrammā stili atšķiras.

Izvēles žurnāli

Mēs varam nosacīti drukāt ziņojumus konsolē ar console.assert().

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

Ja pirmais arguments ir nepatiess, ziņojums tiks reģistrēts.

Ja mēs mainīsimies isItWorkinguz true, tad ziņojums netiks reģistrēts.

Skaitīšana

Vai zinājāt, ka varat rēķināties ar konsoli?

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

Katrs šīs cilpas atkārtojums konsolē izdrukās skaitli. Jūs redzēsiet "noklusējums: 1, noklusējums: 2" utt., Līdz tas sasniedz 10.

Ja atkal palaidīsit šo pašu cilpu, jūs redzēsiet, ka skaits turpinās, kur tas beidzās; 11 - 20.

Lai atiestatītu skaitītāju, kuru mēs varam izmantot console.countReset().

And, if you want to name the counter to something other than "default", you can!

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

Now that we have added a label, you will see "Counter 1, Counter 2", and so on.

And to reset this counter, we have to pass the name into countReset. This way you can have several counters running at the same time and only reset specific ones.

Track Time

Besides counting, you can also time something like a stopwatch.

To start a timer we can use console.time(). This will not do anything by itself. So, in this example, we will use setTimeout() to emulate code running. Then, within the timeout, we will stop our timer using console.timeEnd().

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

As you would expect, after 5 seconds, we will have a timer end log of 5 seconds.

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

Konsoles izeja

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

Konsoles izeja

But wait – it gets better!

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

Konsoles izeja

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?

Lai to izdarītu, mēs izmantojam, %clai norādītu, ka mums ir stili, kurus pievienot. Stili tiek iekļauti otrajā argumentā log.

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

To var izmantot, lai jūsu žurnāli izceltos.

Skaidrs

Ja mēģināt novērst problēmu, izmantojot žurnālus, iespējams, jūs daudz atsvaidzināt, un konsole var būt pārblīvēta.

Vienkārši pievienojiet console.clear()sava koda augšdaļai, un katru reizi, kad atsvaidzināsieties, jums būs jauna konsole. ?

Vienkārši nepievienojiet to sava koda apakšdaļai, lol.

Paldies, ka lasījāt!

Ja vēlaties atkārtoti aplūkot šī raksta jēdzienus, izmantojot video, varat apskatīt šo video versiju, kuru es šeit izveidoju.

Jesse Hall (codeSTACKr)

Es esmu Džesija no Teksasas. Pārbaudiet manu citu saturu un dariet man zināmu, kā es varu jums palīdzēt jūsu ceļojumā, lai kļūtu par tīmekļa izstrādātāju.

  • Abonējiet Manu YouTube
  • Pasaki Sveiki! Instagram | Twitter
  • Reģistrējieties manam jaunumiem