Console JavaScript.log () Contoh - Cara Mencetak ke Konsol di JS

Pengaturcaraan

Log mesej ke konsol adalah cara yang sangat asas untuk mendiagnosis dan menyelesaikan masalah kecil dalam kod anda.

Tetapi, tahukah anda bahawa ada yang lebih consoledari sekadar log? Dalam artikel ini, saya akan menunjukkan kepada anda cara mencetak ke konsol di JS, serta semua perkara yang anda tidak tahu consoleboleh lakukan.

Konsol Penyunting pelbagai baris Firefox

Sekiranya anda tidak pernah menggunakan mod penyunting berbilang baris di Firefox, anda harus mencubanya sekarang!

Cukup buka konsol, Ctrl+Shift+Katau F12, dan di kanan atas anda akan melihat butang yang bertuliskan "Tukar ke mod penyunting berbilang baris". Sebagai alternatif, anda boleh menekan Ctrl+B.

Ini memberi anda editor kod berbilang baris tepat di dalam Firefox.

konsol.log

Mari kita mulakan dengan contoh log yang sangat asas.

let x = 1 console.log(x)

Taipkan itu ke Firefox console dan jalankan kodnya. Anda boleh mengklik butang "Run" atau tekan Ctrl+Enter.

Dalam contoh ini, kita mesti melihat "1" di konsol. Cukup lurus, bukan?

Pelbagai Nilai

Tahukah anda bahawa anda boleh memasukkan pelbagai nilai? Tambahkan rentetan ke permulaan untuk mengenal pasti apa yang anda log masuk dengan mudah.

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

Tetapi bagaimana jika kita mempunyai pelbagai nilai yang ingin kita log?

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

Daripada menaip console.log()tiga kali, kita boleh memasukkan semuanya. Dan kita boleh menambahkan rentetan sebelum masing-masing jika kita mahu juga.

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

Tetapi itu terlalu banyak kerja. Balut saja dengan pendakap kerinting! Sekarang anda mendapat objek dengan nilai bernama.

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

Anda boleh melakukan perkara yang sama dengan objek.

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

Log pertama akan mencetak sifat dalam objek pengguna. Yang kedua akan mengenal pasti objek sebagai "pengguna" dan mencetak sifat di dalamnya.

Sekiranya anda memasukkan banyak perkara ke konsol, ini dapat membantu anda mengenal pasti setiap log.

Pemboleh ubah dalam log

Adakah anda tahu bahawa anda boleh menggunakan bahagian log anda sebagai pemboleh ubah?

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

Dalam contoh ini, %smerujuk kepada pilihan rentetan yang disertakan setelah nilai awal. Ini merujuk kepada "John".

Yang %dmerujuk kepada pilihan digit dimasukkan selepas nilai awal. Ini merujuk kepada 29.

Hasil penyataan ini adalah: "John berumur 29 tahun.".

Variasi log

Terdapat beberapa variasi log. Terdapat yang paling banyak digunakan console.log(). Tetapi ada juga:

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

Variasi ini menambah gaya ke log kami di konsol. Contohnya, warnkehendak berwarna kuning, dan errorkehendak berwarna merah.

Catatan: Gaya berbeza dari penyemak imbas ke penyemak imbas.

Log Pilihan

Kita boleh mencetak mesej ke konsol dengan syarat console.assert().

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

Sekiranya argumen pertama salah, maka mesej akan dicatat.

Sekiranya kita menukar isItWorkingke true, maka mesej itu tidak akan dicatat.

Mengira

Adakah anda tahu bahawa anda boleh mengira dengan konsol?

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

Setiap lelaran gelung ini akan mencetak kiraan ke konsol. Anda akan melihat "lalai: 1, lalai: 2", dan seterusnya sehingga mencapai 10.

Sekiranya anda menjalankan gelung yang sama sekali lagi, anda akan melihat bahawa jumlahnya akan meningkat dari mana ia berhenti; 11 - 20.

Untuk menetapkan semula kaunter yang boleh kita gunakan 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().

Keluaran Konsol

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

Keluaran Konsol

But wait – it gets better!

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

Keluaran Konsol

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?

Untuk melakukan ini, kami gunakan %cuntuk menentukan bahawa kami mempunyai gaya untuk ditambahkan. Gaya diteruskan ke argumen kedua dari log.

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

Anda boleh menggunakan ini untuk menjadikan log anda menonjol.

Jelas

Sekiranya anda cuba menyelesaikan masalah menggunakan log, anda mungkin banyak menyegarkan dan konsol anda mungkin berantakan.

Cukup tambahkan console.clear()ke bahagian atas kod anda dan anda akan mempunyai konsol segar setiap kali anda menyegarkan semula. ?

Jangan tambahnya ke bahagian bawah kod anda, lol.

Terima kasih untuk membaca!

Sekiranya anda ingin melihat semula konsep dalam artikel ini melalui video, anda boleh melihat versi video yang saya buat di sini.

Jesse Hall (codeSTACKr)

Saya Jesse dari Texas. Lihat kandungan saya yang lain dan beritahu saya bagaimana saya dapat membantu anda dalam perjalanan anda untuk menjadi pembangun web.

  • Langgan YouTube Saya
  • Katakan hai! Instagram | Twitter
  • Daftar ke Buletin Saya