Salah satu kaedah termudah untuk men-debug apa pun dalam JavaScript adalah dengan mencatat log menggunakan barang console.log. Tetapi terdapat banyak kaedah lain yang disediakan oleh konsol yang dapat membantu anda membuat debug dengan lebih baik.
Mari kita mulakan.
Kes penggunaan yang sangat asas adalah mencatat rentetan atau sekumpulan objek JavaScript. Cukup sederhana,
console.log('Is this working?');Sekarang, bayangkan senario apabila anda mempunyai banyak objek yang anda perlukan untuk log masuk ke konsol.
const foo = { id: 1, verified: true, color: 'green' };const bar = { id: 2, verified: false, color: 'red' };Kaedah yang paling intuitif untuk mencatat ini adalah hanya console.log(variable)satu demi satu. Masalahnya lebih jelas apabila kita melihat bagaimana ia muncul di konsol.
Seperti yang anda lihat, tidak ada nama pemboleh ubah yang dapat dilihat. Ia menjadi sangat menjengkelkan apabila anda mempunyai banyak ini dan anda perlu mengembangkan anak panah kecil di sebelah kiri untuk melihat apa sebenarnya nama pemboleh ubah itu. Masukkan nama harta benda yang dikira. Ini membolehkan kita pada dasarnya menggabungkan semua pemboleh ubah bersama dalam satu console.log({ foo, bar });dan outputnya mudah dilihat. Ini juga mengurangkan bilangan console.logbaris dalam kod kami.
konsol. meja ()
Kita dapat melangkah lebih jauh dengan meletakkan semua ini bersama-sama dalam satu jadual agar lebih mudah dibaca. Bila-bila masa anda mempunyai objek dengan sifat umum atau pelbagai objek gunakan console.table(). Di sini kita boleh gunakan console.table({ foo, bar})dan konsol menunjukkan:
console.group ()
Ini boleh digunakan semasa anda ingin mengumpulkan atau menyusun maklumat yang relevan bersama-sama untuk membaca log dengan mudah.
Ini juga dapat digunakan ketika anda mempunyai beberapa pernyataan log dalam fungsi dan anda ingin dapat melihat dengan jelas skop yang sesuai dengan setiap pernyataan.
Contohnya, jika anda mencatat maklumat 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 boleh menggunakan console.groupCollapsed()sebagai ganti console.group()jika anda mahu kumpulan tersebut runtuh secara lalai. Anda perlu menekan butang penerangan di sebelah kiri untuk mengembang.
console.warn () & console.error ()
Bergantung pada keadaan, untuk memastikan konsol anda lebih mudah dibaca, anda boleh menambahkan log menggunakan console.warn()atau console.error(). Ada juga console.info()yang memaparkan ikon 'i' di beberapa penyemak imbas.
Ini dapat diambil selangkah lebih jauh dengan menambahkan gaya khusus. Anda boleh menggunakan %carahan untuk menambahkan gaya ke penyataan log apa pun. Ini dapat digunakan untuk membedakan antara panggilan API, acara pengguna, dan lain-lain dengan membuat konvensi. Inilah 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 boleh mengubah font-size, font-styledan perkara CSS lain.
console.trace ()
console.trace()mengeluarkan jejak timbunan ke konsol dan memaparkan bagaimana kod itu berakhir pada titik tertentu. Terdapat kaedah tertentu yang hanya ingin anda panggil sekali, seperti memadam dari pangkalan data. console.trace()boleh digunakan untuk memastikan kod tersebut berkelakuan seperti yang kita mahukan.
konsol.waktu ()
Satu lagi perkara penting dalam pembangunan frontend adalah kodnya harus cepat. console.time()membolehkan masa operasi tertentu dalam kod untuk diuji.
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");
Mudah-mudahan, artikel itu memberikan sedikit maklumat mengenai pelbagai cara menggunakan konsol. Sekiranya anda mempunyai sebarang pertanyaan atau mahu saya menghuraikan, sila tinggalkan nota di bawah ini atau hubungi saya di twitter atau e-mel.