Halo, Habr! Saya hadir untuk Anda terjemahan artikel "Cara menggunakan konsol JavaScript: melampaui console.log ()" oleh Yash Agrawal.Salah satu cara termudah untuk men-debug sesuatu dalam JavaScript adalah untuk mengeluarkan materi menggunakan console.log. Tetapi ada banyak metode lain yang disediakan oleh konsol yang dapat membantu meningkatkan debugging.Ayo mulai.Kasus penggunaan paling dasar adalah untuk menampilkan string atau grup objek JavaScript. Cukup mudahconsole.log('Is this working?');
Sekarang bayangkan sebuah skenario ketika Anda memiliki banyak objek yang perlu Anda output ke konsol.const foo = { id: 1, verified: true, color: 'green};
const bar = { id: 2, verified: false, color: 'red' };
Cara paling intuitif untuk keluaran adalah console.log (variabel) beberapa kali. Masalahnya menjadi lebih jelas ketika kita melihat bagaimana itu ditampilkan di konsol.
Seperti yang Anda lihat, nama-nama variabel tidak terlihat, yang sangat tidak nyaman. Ini dapat dipecahkan dengan menggabungkan semua variabel ke dalam console.log tunggal ({foo, bar}). Ini juga mengurangi jumlah baris console.log dalam kode kami.meja konsol ()
Kita bisa mengambil langkah selanjutnya dengan meletakkan semua ini dalam sebuah tabel agar lebih mudah dibaca. Setiap kali Anda memiliki objek dengan properti umum atau array objek, gunakan console.table (). Di sini kita dapat menggunakan console.table ({foo, bar}) dan konsol menunjukkan:
console.group ()
Ini dapat digunakan ketika Anda ingin mengelompokkan atau menyatukan elemen terkait untuk dapat membaca log dengan mudah.Anda juga dapat menggunakannya ketika Anda memiliki beberapa pernyataan log di dalam suatu fungsi, dan Anda ingin dapat melihat dengan jelas ruang lingkup yang terkait dengan setiap pernyataan.Misalnya, jika Anda mendaftarkan data pengguna:
console.group('User Details');
console.log('name: John Doe');
console.log('job: Software Developer');
console.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 () alih-alih console.group () jika Anda ingin grupnya diciutkan secara default. Anda perlu mengklik tombol pegangan di sebelah kiri untuk membentangkan.console.warn () & console.error ()
Bergantung pada situasinya, untuk membuat 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.
Anda dapat melangkah lebih jauh dengan menambahkan gaya Anda sendiri. Anda dapat menggunakan arahan% c untuk menambahkan styling ke pernyataan log apa pun. Ini dapat digunakan untuk membedakan antara panggilan API, acara pengguna, dll.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 ukuran font, gaya font, dan elemen CSS lainnya.
console.trace ()
console.trace () mencetak jejak stack ke konsol dan menampilkan bagaimana kode keluar pada titik tertentu. Ada beberapa metode yang hanya ingin Anda panggil sekali saja, misalnya penghapusan dari basis data. console.trace () dapat digunakan untuk memastikan bahwa kode berperilaku seperti yang kita inginkan.console.time ()
Hal penting lainnya ketika datang ke pengembangan frontend adalah bahwa kode harus cepat. console.time () memungkinkan Anda untuk menyinkronkan 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++) {
Semoga artikel ini telah memberikan beberapa informasi tentang berbagai cara menggunakan konsol.