Debugging di JavaScript: Masuk ke Konsol Browser

Konsol browser web adalah salah satu alat yang paling banyak digunakan untuk men-debug aplikasi front-end. Console API memberi pengembang kemampuan untuk mengatasi kesalahan dan mencatat pesan.

konsol.log() mungkin merupakan metode yang paling umum digunakan di Console API, tetapi ada juga metode lain yang dapat Anda gunakan dalam alur kerja Anda. Panduan ini menunjukkan kepada Anda berbagai metode konsol browser web yang dapat Anda gunakan untuk meningkatkan alur kerja debug Anda.

Mengapa Pencatatan Penting?

Masuk ke konsol browser web adalah salah satu metode terbaik untuk men-debug aplikasi berbasis JavaScript atau front-end.

Terkait: 6 Kerangka JavaScript Layak Dipelajari

Sebagian besar browser web modern mendukung API Konsol, membuatnya tersedia untuk pengembang. Objek konsol bertanggung jawab untuk menyediakan akses ke konsol debug browser. Implementasinya mungkin berbeda di seluruh browser tetapi sebagian besar metode akan berfungsi di semua browser modern.

Tip : Konsol browser Anda dapat menjalankan semua kode yang dibahas dalam panduan ini. tekan F12 di keyboard Anda untuk membuka alat pengembang browser di Chrome atau Firefox.

Mencatat Pesan String

Salah satu metode konsol yang paling umum adalah konsol.log() . Ini hanya menampilkan pesan string atau beberapa nilai ke konsol web. Untuk nilai sederhana atau pesan string, konsol.log() metode mungkin merupakan pilihan terbaik untuk digunakan.

bagaimana cara menyinkronkan akun email saya

Untuk mengeluarkan a Halo Dunia pesan, Anda dapat menggunakan yang berikut ini.

console.log(`Hello World`);

Fitur khusus lainnya dari konsol.log() metode adalah kemampuan untuk mencetak output elemen DOM atau struktur bagian dari situs web, misalnya, untuk menampilkan struktur elemen tubuh dan semua yang ada di dalamnya menggunakan yang berikut ini.

console.log(document.body)

Outputnya adalah kumpulan elemen DOM sebagai pohon HTML.

Mencatat Objek JavaScript Interaktif

NS konsol.dir() metode ini digunakan untuk mencatat properti interaktif objek JavaScript. Misalnya, Anda dapat menggunakannya untuk melihat elemen DOM di halaman web.

Output khas dari konsol.dir() metode ini terdiri dari semua properti Objek JavaScript yang ditentukan dalam format JSON. Gunakan metode di bawah ini untuk mencetak properti semua elemen di badan halaman HTML:

console.dir(document.body)

Mengevaluasi Ekspresi

Anda mungkin akrab dengan metode penegasan dari pengujian unit — yah, konsol.menegaskan() metode bekerja dengan cara yang sama. Menggunakan konsol.menegaskan() metode untuk mengevaluasi ekspresi atau kondisi.

Ketika metode penegasan gagal, konsol mencetak pesan kesalahan; jika tidak, itu tidak mencetak apa pun. Gunakan kode di bawah ini untuk mengevaluasi apakah usia seseorang lebih dari 18 tahun:

let ageLimit = 18;  
let yourAge = 12;  
const assertFailMessage = 'You have to be older than 18 years of age';  
  
console.assert( yourAge > ageLimit, assertFailMessage);

Pernyataan di atas gagal dan pesan kesalahan tercetak sesuai.

Mencatat Data di Tabel

Menggunakan meja konsol() metode untuk menampilkan data dalam format tabel. Kandidat yang baik untuk ditampilkan dalam bentuk tabel termasuk array atau data objek.

Catatan : Beberapa browser, seperti Firefox, memiliki batas maksimum 1.000 baris yang dapat ditampilkan dengan meja konsol() metode.

Dengan asumsi Anda memiliki array objek mobil berikut:

 let cars = [  
 {'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},  
 {'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}  
]

Anda dapat menampilkan array di atas dalam tabel menggunakan metode di bawah ini:

console.table(cars);

Mencatat Pesan berdasarkan Kategori

Pesan konsol browser web terutama dikategorikan ke dalam tiga kelompok: kesalahan, peringatan, dan info.

kesalahan

Untuk secara khusus mencetak pesan kesalahan ke konsol menggunakan konsol.kesalahan() metode, pesan terkait kesalahan ditampilkan dalam font merah.

console.error('error message');

Peringatan

Untuk mencetak peringatan, gunakan yang berikut ini. Seperti kebanyakan skenario, pesan peringatan ditampilkan dalam warna oranye:

console.warn('warning message');

Info

Untuk mencetak informasi umum ke konsol, gunakan konsol.info() metode:

console.info('general info message')

Sangat mudah untuk memfilter atau menemukan pesan di konsol browser jika sudah dikategorikan dengan benar.

Menelusuri Alur Program

Menggunakan konsol.trace() metode untuk mencetak jejak tumpukan aliran atau eksekusi program. Ini adalah fitur yang sangat berguna untuk debugging karena mencetak urutan fungsi yang dijalankan dalam program Anda.

Untuk melihat konsol.trace() metode dalam tindakan, Anda dapat membuat tiga fungsi (seperti di bawah) dan menempatkan jejak tumpukan di salah satu fungsi.

function functionOne(){  
 functionTwo()  
}  
function functionTwo(){  
 functionThree()  
}  
function functionThree(){  
 console.trace()  
}

Di konsol browser Anda, panggil atau picu fungsiSatu() dan Anda akan mendapatkan jejak tumpukan dari panggilan fungsi yang dicetak dalam Last In First Out Order (LIFO) karena itu adalah tumpukan.

Waktu Eksekusi Program

Untuk menghitung berapa lama waktu yang dibutuhkan sebuah operasi untuk dieksekusi di program Anda, Anda dapat menggunakan konsol.waktu() metode. konsol.waktu() biasanya digunakan bersama dengan console.timeEnd () metode di mana yang terakhir digunakan untuk mengakhiri timer.

Anda dapat menjalankan hingga 10.000 penghitung waktu per halaman web, menyoroti pentingnya memberi label penghitung waktu dengan benar.

Untuk menghitung berapa lama waktu yang dibutuhkan untuk melewati angka 1 hingga 50.000, Anda dapat menggunakan pengatur waktu sebagai berikut.

console.time('loop timer 2');  
for(i=1; i<50001; i++){  
}  
console.timeEnd('loop timer 2');

Perhitungan

NS konsol.hitung() metode ini digunakan untuk melacak berapa kali suatu fungsi atau beberapa bagian kode telah dipanggil dalam suatu program. Misalnya, kita dapat melacak berapa kali perulangan for dieksekusi sebagai berikut:

 for(i=0; i<4; i++ ){  
 console.count();  
}

Mengelompokkan Pesan Log

Sama seperti metode pengatur waktu, konsol.grup () , dan console.groupEnd () metode biasanya digunakan berpasangan.

Metode grup membantu Anda mengatur pesan log dengan lebih baik. Misalnya, kita dapat membuat grup pesan peringatan dengan label peringatan sebagai berikut.

console.group('warnings')  
 console.warn('another warning');  
 console.warn('This is a warning')  
console.groupEnd()

Dua pesan dalam grup peringatan secara visual dikategorikan seperti yang terlihat pada output di bawah ini.

Menghapus Konsol

Last but not least, berikut adalah beberapa cara di mana Anda dapat menghapus pesan log di konsol browser Anda.

Menggunakan konsol.hapus() metode sebagai berikut.

console.clear()

Anda juga dapat menghapus konsol browser menggunakan pintasan keyboard browser.

Google Chrome : Ctrl + L

Firefox : Ctrl + Shift + L

Menggunakan Konsol Browser Sepenuhnya

Panduan ini telah menunjukkan kepada Anda beberapa metode konsol browser web berbeda yang tersedia untuk membantu Anda men-debug aplikasi front-end. API konsol sangat ringan, mudah dipelajari, dan didukung secara luas di sebagian besar browser modern.

cara menghapus cadangan di mac

Buat validasi CAPTCHA dari proyek Anda berikutnya dan uji keterampilan debugging baru Anda!

Membagikan Membagikan Menciak Surel Buat Formulir Validasi CAPTCHA Menggunakan HTML, CSS, dan JavaScript

Amankan situs web Anda dengan validasi CAPTCHA.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
Pengembangan web
JavaScript

Tentang Penulis Baik untuk pergi(36 Artikel Diterbitkan)

Mwiza mengembangkan perangkat lunak berdasarkan profesi dan menulis secara ekstensif di Linux dan pemrograman front-end. Beberapa minatnya termasuk sejarah, ekonomi, politik & arsitektur perusahaan.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan