Hari ini kami menerbitkan catatan tentang fitur menggunakan konsol JavaScript di browser yang terletak di luar perintah
console.log() . Sebenarnya, perintah ini adalah alat paling sederhana untuk debugging program, yang memungkinkan Anda untuk mengeluarkan sesuatu ke konsol. Namun, pengetahuan tentang beberapa fitur alat ini akan memungkinkan mereka yang menggunakannya untuk meningkatkan efisiensi kerja.
Console.log () perintah dan nama variabel
Kasus penggunaan paling sederhana untuk
console.log() , misalnya, untuk menghasilkan beberapa string atau objek. Misalnya, cetak baris ke konsol:
console.log('Is this working?');
Sekarang bayangkan Anda perlu menampilkan beberapa objek ke konsol. Misalnya - seperti:
const foo = { id: 1, verified: true, color: 'green' }; const bar = { id: 2, verified: false, color: 'red' };
Mungkin akan lebih logis untuk menggunakan beberapa perintah dari form
console.log(variable) untuk menyelesaikan masalah ini. Meskipun data sampai ke konsol, satu masalah menjadi jelas ketika dikeluarkan.
Lihatlah apa yang ditampilkan di konsol.
Tidak ada nama variabel di konsolSeperti yang Anda lihat, nama variabel
foo dan
bar tidak ada di sini. Objek, menggunakan ikon panah di bagian kiri dari garis, dapat diperluas, tetapi bahkan melihat struktur internal objek, bisa sangat sulit untuk memahami objek mana yang ditampilkan di konsol. Dalam memecahkan masalah ini, nama properti objek yang dikomputasi akan membantu kami. Yaitu, fitur literal objek ini, yang muncul dalam ES6, memungkinkan Anda untuk menggunakan desain yang nyaman dari bentuk berikut:
console.log({ foo, bar });
Dengan pendekatan ini, sebuah objek akan sampai ke konsol yang nama propertinya akan menjadi nama-nama objek variabel yang perlu ditampilkan. Selain itu, ini memungkinkan Anda untuk menyingkirkan beberapa panggilan ke
console.log() , yang sebelumnya digunakan untuk menampilkan objek secara terpisah.
Command console.table ()
Anda selanjutnya dapat meningkatkan tampilan apa yang ditampilkan program di konsol dengan memformat konten objek dalam tabel. Ini akan memiliki efek yang baik pada keterbacaan informasi. Yaitu, kita berbicara tentang fakta bahwa jika Anda menampilkan objek dengan nama properti yang sama atau array objek serupa di konsol, Anda dapat menggunakan perintah
console.table() . Ini adalah hasil dari mengeksekusi perintah form
console.table({ foo, bar }) .
Perintah Console.table () beraksiPerintah Console.group ()
Perintah ini dapat digunakan jika Anda perlu mengelompokkan data terkait tertentu dan membuat struktur dari grup bersarang yang meningkatkan kegunaan bekerja dengan data tersebut.
Selain itu, pendekatan ini dapat digunakan dalam kasus-kasus di mana beberapa perintah untuk mengeluarkan sesuatu ke konsol dieksekusi dalam fungsi tertentu, dan perlu bahwa mungkin untuk secara jelas, sekilas, memisahkan hasil perintah tersebut dari yang lain.
Misalkan kita menampilkan informasi tentang pengguna tertentu di konsol:
console.group('User Details'); console.log('name: John Doe'); console.log('job: Software Developer');
Beginilah hasil dari kode ini.
Mengelompokkan hasil perintah output data ke konsolSaat menggunakan perintah
console.group() , grup secara default ditampilkan dalam bentuk yang diperluas. Untuk memperkecilnya, Anda dapat menggunakan perintah
console.groupCollapsed() alih-alih perintah ini. Untuk melihat konten grup seperti itu, Anda perlu mengembangkannya menggunakan ikon yang terletak di sebelah kiri nama grup.
Console.warn () dan console.error ()
Bergantung pada situasinya, perintah
console.warn() dan
console.error() mungkin berguna untuk menekankan pentingnya beberapa pesan yang ditampilkan di konsol. Mereka digunakan, masing-masing, untuk menampilkan peringatan dan kesalahan.
Peringatan dan KesalahanMungkin perintah
console.info() , yang dirancang untuk menampilkan pesan informasi, juga berguna bagi Anda.
Dalam menyesuaikan tampilan pesan yang ditampilkan di konsol, Anda dapat melangkah lebih jauh dengan menata sendiri. Anda dapat menggunakan direktif
%c ke teks gaya yang ditampilkan di konsol. Ini dapat berguna, misalnya, untuk mengatur pemisahan visual dari informasi yang datang dari subsistem untuk mengakses API tertentu, dari subsistem yang bertanggung jawab untuk memproses peristiwa yang dibuat pengguna, dan sebagainya. Hal utama di sini adalah mengembangkan beberapa aturan gaya dan mematuhinya. Berikut ini adalah contoh penyesuaian tampilan output data ke konsol:
console.log('%c Auth ', 'color: white; background-color: #2274A5', 'Login page rendered'); console.log('%c GraphQL ', 'color: white; background-color: #95B46A', 'Get user details'); console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details');
Anda juga dapat mengonfigurasi properti CSS lainnya dari teks, seperti
font-size font-style dan
font-style .
Menata output data ke konsolPerintah Console.trace ()
Perintah
console.trace() mencetak hasil jejak stack ke konsol dan memungkinkan Anda untuk menilai apa yang terjadi pada titik tertentu dalam program selama eksekusi. Sebagai contoh, ada beberapa metode yang, dalam situasi tertentu, perlu dipanggil hanya sekali, katakanlah - metode untuk menghapus informasi dari database. Dimungkinkan untuk memeriksa apakah
console.trace() benar-benar hanya melakukan satu panggilan ke metode ini. Perintah ini memungkinkan Anda untuk menampilkan informasi di konsol yang membantu memverifikasi operasi yang benar dari mekanisme internal program.
Command console.time ()
Salah satu tugas penting yang dihadapi pengembang front-end adalah untuk memberikan kode kecepatan tinggi. Perintah
console.time() memungkinkan Anda untuk mengukur waktu pelaksanaan operasi dan menampilkan apa yang berhasil Anda temukan di konsol. Misalnya, dengan menggunakan perintah ini kami memeriksa beberapa siklus:
let i = 0; console.time("While loop"); while (i < 1000000) { i++; } console.timeEnd("While loop"); console.time("For loop"); for (i = 0; i < 1000000; i++) {
Lihatlah apa yang masuk ke konsol setelah mengeksekusi kode ini.
Hasil menggunakan console.time ()Ringkasan
Pada artikel ini, kami melihat beberapa hal kecil yang berguna mengenai output data di konsol browser. Jika Anda tidak tahu tentang fitur-fitur ini sebelumnya, kami harap sekarang Anda memiliki alat JavaScript baru yang bermanfaat.
Pembaca yang budiman! Jika Anda sedang mengembangkan proyek JavaScript besar, kami meminta Anda untuk memberi tahu kami tentang cara Anda menyelesaikan masalah logging di dalamnya.