Cara menggunakan konsol JavaScript: melampaui console.log ()

Salah satu cara termudah untuk men-debug apa pun di JavaScript adalah dengan membuat log menggunakan console.log. Tetapi ada banyak metode lain yang disediakan oleh konsol yang dapat membantu Anda men-debug dengan lebih baik.

Mari kita mulai.

Kasus penggunaan yang paling dasar adalah mencatat string atau sekumpulan objek JavaScript. Sederhananya,

console.log('Is this working?');

Sekarang, bayangkan skenario ketika Anda memiliki sekumpulan objek yang Anda perlukan untuk masuk ke konsol.

const foo = { id: 1, verified: true, color: 'green' };const bar = { id: 2, verified: false, color: 'red' };

Cara paling intuitif untuk mencatat ini adalah dengan hanya console.log(variable)satu demi satu. Masalahnya lebih jelas ketika kita melihat bagaimana itu muncul di konsol.

Seperti yang Anda lihat, tidak ada nama variabel yang terlihat. Ini menjadi sangat menjengkelkan ketika Anda memiliki banyak dari ini dan Anda harus memperluas panah kecil di sebelah kiri untuk melihat apa sebenarnya nama variabel itu. Masukkan nama properti yang dihitung. Hal ini memungkinkan kita untuk menggabungkan semua variabel menjadi satu console.log({ foo, bar });dan hasilnya mudah terlihat. Ini juga mengurangi jumlah console.logbaris dalam kode kita.

meja konsol()

Kita dapat mengambil langkah lebih jauh dengan menempatkan semua ini bersama-sama dalam sebuah tabel agar lebih mudah dibaca. Setiap kali Anda memiliki objek dengan properti umum atau menggunakan array objek console.table(). Di sini kita dapat menggunakan console.table({ foo, bar})dan konsol menunjukkan:

console.group ()

Ini dapat digunakan saat Anda ingin mengelompokkan atau menyatukan detail yang relevan agar dapat dengan mudah membaca log.

Ini juga dapat digunakan ketika Anda memiliki beberapa pernyataan log dalam suatu fungsi dan Anda ingin dapat melihat dengan jelas cakupan yang sesuai dengan setiap pernyataan.

Misalnya, jika Anda membuat log detail pengguna:

console.group('User Details');console.log('name: John Doe');console.log('job: Software Developer');
// Nested Groupconsole.group('Address');console.log('Street: 123 Townsend Street');console.log('City: San Francisco');console.log('State: CA');console.groupEnd();
console.groupEnd();

Anda juga dapat menggunakan console.groupCollapsed()bukan console.group()jika Anda ingin kelompok untuk runtuh secara default. Anda perlu menekan tombol deskriptor di sebelah kiri untuk meluaskan.

console.warn () & console.error ()

Bergantung pada situasinya, untuk memastikan konsol Anda lebih mudah dibaca, Anda dapat menambahkan log menggunakan console.warn()atau console.error(). Ada juga console.info()yang menampilkan ikon 'i' di beberapa browser.

Ini dapat diambil selangkah lebih maju dengan menambahkan gaya kustom. Anda dapat menggunakan %carahan untuk menambahkan gaya ke pernyataan log apa pun. Ini dapat digunakan untuk membedakan antara panggilan API, acara pengguna, dll dengan mempertahankan konvensi. Berikut contohnya:

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 mengubah font-size, font-styledan hal-hal CSS lainnya.

console.trace ()

console.trace()mengeluarkan pelacakan tumpukan ke konsol dan menampilkan bagaimana kode berakhir pada titik tertentu. Ada metode tertentu yang hanya ingin Anda panggil sekali, seperti menghapus dari database. console.trace()dapat digunakan untuk memastikan kode berperilaku seperti yang kita inginkan.

console.time ()

Hal penting lainnya dalam hal pengembangan frontend adalah kodenya harus cepat. console.time()memungkinkan waktu operasi tertentu dalam kode untuk pengujian.

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++) { // For Loop}console.timeEnd("For loop");

Semoga artikel ini memberikan beberapa informasi tentang berbagai cara menggunakan konsol. Jika Anda memiliki pertanyaan atau ingin saya menjelaskan lebih lanjut, silakan tinggalkan saya catatan di bawah atau hubungi saya di twitter atau email.