🐓 🚵🏿 🃏 Beberapa metode objek Konsol yang menarik 👨🏿‍🚀 👨🏽‍🏭 🧛🏽

Selamat siang teman-teman!

Dalam catatan singkat ini, saya ingin berbagi dengan Anda informasi tentang beberapa metode objek Konsol yang dapat digunakan bersama dengan console.log ().

Daftar lengkap metode dapat ditemukan di sini .

Dari kata-kata hingga tindakan. Ya, Chrome akan digunakan untuk bekerja.

Console.debug () dan console.info ()

Console.debug () dan console.info () digunakan untuk menampilkan pesan informasi ke konsol dan, pada kenyataannya, adalah analog dari console.log (). Salah satu fitur console.debug () adalah bahwa pesan yang ditampilkan oleh metode ini hanya ditampilkan jika konsol tersebut dikonfigurasi untuk menampilkan pesan level debug (untuk Chrome, Verbose memiliki tanda centang di tab Levels).

Mari kita membuat beberapa objek:

const harry = { name: 'Harry', age: 28, married: false, job: 'developer', salary: 300, }, alice = { name: 'Alice', age: 23, married: false, job: 'manager', salary: 100, }, bob = { name: 'Bob', age: 32, married: true, job: 'tester', salary: 200 }

Daftarkan mereka di konsol menggunakan console.log (harry, alice, bob):

Sekarang, menggunakan console.debug (), memberikan informasi tambahan ("\ n" adalah karakter kontrol untuk umpan baris, ruang di awal adalah untuk penyelarasan):

 console.debug( ' The first employee is', harry.name, '\n The second employee is', alice.name, '\n The third employee is', bob.name )

Kami mendapatkan yang berikut ini:

Akhirnya, menggunakan console.info (), menggunakan wildcard ("% s" adalah sebuah string, "% d" adalah angka, "% s" adalah arahan untuk menerapkan gaya):

 console.info(' This is %c%s%c. \n He\'s %d years old. \n He\'s %s. \n He works as %s. \n His salary is %d.', 'font-size: 1.2em; font-weight: 600; color: deepskyblue; text-decoration: underline;', harry.name, '', harry.age, harry.married ? 'married' : 'not married', harry.job, harry.salary)

Hasil (perhatikan "Harry" yang kami bungkus dalam% c):

Console.count ()

Console.count () menampilkan jumlah panggilan metode dengan label tertentu (diteruskan dalam parameter metode). Untuk mengatur ulang penghitung dengan nilai yang diberikan, gunakan console.countReset ().

Contoh yang sedikit dimodifikasi dengan MDN:

 let user = '' function greet() { console.count(user) return 'hi ' + user } user = 'bob' greet() user = 'alice' greet() greet() console.count('alice')

Kami melihat yang berikut:

Secara pribadi, saya belum bisa menggunakan metode ini, tetapi peluangnya tampak menarik.

Console.group ()

Console.group () digunakan untuk mengelompokkan pesan (dengan pergeseran kanan satu tingkat). Grup dapat diberi nama. Untuk menutup grup, gunakan console.groupEnd (). Console.groupCollapsed () melakukan hal yang sama dengan console.group (), tetapi hasilnya dalam grup yang diperkecil (kami bekerja dengan objek yang dibuat sebelumnya):

 console.groupCollapsed('harry') console.log(harry.name) console.log(harry.age) console.log(harry.married) console.log(harry.job) console.log(harry.salary) console.groupEnd() console.groupCollapsed('alice') console.log(alice.name) console.log(alice.age) console.log(alice.married) console.log(alice.job) console.log(alice.salary) console.groupEnd() console.groupCollapsed('bob') console.log(bob.name) console.log(bob.age) console.log(bob.married) console.log(bob.job) console.log(bob.salary) console.groupEnd()

Kami mendapatkan:

Console.table ()

Console.table () menampilkan data dalam tabel.

Buat array objek:

 let staff = [{ name: 'Harry', age: 29, married: false, job: 'developer', salary: 'many', }, { name: 'Alice', age: 23, married: false, job: 'manager', salary: 'few' }, { name: 'Bob', age: 32, married: true, job: 'tester', salary: 'medium' } ]

Turunkan menggunakan console.log (barang):

Tidak terlalu jelas, setuju.

Sekarang menggunakan console.table (barang):

Masalah yang cukup berbeda.

Waktu Konsol ()

Console.time () memulai timer dengan nama dari parameter yang diteruskan. Timer dihentikan menggunakan console.timeEnd (). Untuk memperbaiki nilai perantara, gunakan console.timeLog ():

 console.time('time') //    function fact(n) { return n ? n * fact(n - 1) : 1 } console.log(fact(12)) console.timeLog('time') //    function fib(n) { return n <= 1 ? n : fib(n - 1) + fib(n - 2) } console.log((fib(34))) // :      console.timeEnd('time')

Hasil:

Console.trace ()

Console.trace () mencetak jejak tumpukan. Dapat digunakan untuk menentukan urutan panggilan fungsi.

Contoh yang sedikit dimodifikasi dengan MDN:

 foo() function foo() { //  bar() } function bar() { //   baz() } function baz() { //    console.trace('stack traces:') }