Home-theater-designers
Konsol penyemak imbas web adalah salah satu alat yang paling banyak digunakan untuk men-debug aplikasi front-end. API Konsol memberikan kemampuan kepada pembangun untuk menangani kesilapan dan mesej log.
konsol.log () mungkin kaedah yang paling biasa digunakan di Console API, tetapi ada juga kaedah lain yang boleh anda gunakan dalam aliran kerja anda. Panduan ini menunjukkan kepada anda pelbagai kaedah konsol penyemak imbas web yang boleh anda gunakan untuk meningkatkan aliran kerja penyahpepijatan anda.
Mengapa Pembalakan Penting?
Log masuk ke konsol penyemak imbas web adalah salah satu kaedah terbaik untuk menyahpepijat aplikasi berasaskan aplikasi depan atau JavaScript.
Berkaitan: 6 Kerangka JavaScript yang Perlu Dipelajari
Sebilangan besar penyemak imbas web moden menyokong API Konsol, menjadikannya tersedia untuk pembangun. Objek konsol bertanggungjawab untuk memberikan akses ke konsol penyahpepijat penyemak imbas. Pelaksanaannya mungkin berbeza di semua penyemak imbas tetapi kebanyakan kaedah akan berfungsi di semua penyemak imbas moden.
Petua : Konsol penyemak imbas anda boleh menjalankan semua kod yang dibincangkan dalam panduan ini. Tekan F12 pada papan kekunci anda untuk membuka alat pembangun penyemak imbas di Chrome atau Firefox.
Mesej Rentetan Log
Salah satu kaedah konsol yang paling biasa adalah konsol.log () . Ia hanya mengeluarkan mesej rentetan atau beberapa nilai ke konsol web. Untuk nilai sederhana atau mesej rentetan, konsol.log () kaedah mungkin merupakan pilihan terbaik untuk digunakan.
bagaimana saya membuat sandaran ke awan
Untuk mengeluarkan a Hai dunia mesej, anda boleh menggunakan yang berikut.
console.log(`Hello World`); Satu lagi ciri khas dari konsol.log () kaedah adalah kemampuan untuk mencetak output elemen DOM atau struktur bahagian laman web, misalnya, untuk mengeluarkan struktur elemen badan dan semua yang ada di dalamnya menggunakan yang berikut.
console.log(document.body) Keluarannya adalah kumpulan elemen DOM sebagai pohon HTML.
Log Objek Objek Interaktif
The konsol.dir () kaedah digunakan untuk mencatat sifat interaktif objek JavaScript. Sebagai contoh, anda boleh menggunakannya untuk melihat elemen DOM di laman web.
Output khas dari konsol.dir () kaedah terdiri dari semua sifat Objek JavaScript yang ditentukan dalam format JSON. Gunakan kaedah di bawah untuk mencetak sifat semua elemen dalam badan halaman HTML:
console.dir(document.body) Menilai Ungkapan
Anda mungkin biasa dengan kaedah penegasan dari pengujian unit - baik console.assert () kaedah berfungsi dengan cara yang serupa. Menggunakan console.assert () kaedah untuk menilai suatu ungkapan atau keadaan.
Apabila kaedah penegasan gagal, konsol mencetak mesej ralat; jika tidak, ia tidak mencetak apa-apa. Gunakan kod di bawah untuk menilai sama ada umur seseorang melebihi 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); Tegasan di atas gagal dan mesej ralat dicetak dengan sewajarnya.
Data Log masuk dalam Jadual
Menggunakan konsol. meja () kaedah untuk memaparkan data dalam format jadual. Calon yang baik untuk dipaparkan dalam bentuk jadual merangkumi tatasusunan atau data objek.
Catatan : Beberapa penyemak imbas, seperti Firefox, mempunyai had maksimum 1,000 baris yang dapat ditampilkan dengan konsol. meja () kaedah.
Dengan andaian anda mempunyai pelbagai objek kereta berikut:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Anda boleh memaparkan susunan di atas dalam jadual menggunakan kaedah di bawah:
console.table(cars); Log Mesej mengikut Kategori
Mesej konsol penyemak imbas web terutama dikategorikan dalam tiga kumpulan: ralat, amaran, dan maklumat.
Kesalahan
Untuk mencetak mesej ralat secara khusus ke konsol menggunakan console.error () kaedah, mesej yang berkaitan dengan kesalahan ditunjukkan dalam fon merah.
console.error('error message'); Amaran
Untuk mencetak amaran, gunakan yang berikut. Seperti kebanyakan senario, mesej amaran dipaparkan dengan warna oren:
console.warn('warning message');Maklumat
Untuk mencetak maklumat umum ke konsol, gunakan console.info () kaedah:
console.info('general info message') Sangat mudah untuk menapis atau mencari mesej di konsol penyemak imbas apabila dikategorikan dengan betul.
Mengesan Aliran Program
Menggunakan console.trace () kaedah untuk mencetak jejak aliran atau pelaksanaan program. Ini adalah ciri yang sangat berguna untuk melakukan debug kerana mencetak urutan fungsi yang dijalankan dalam program anda.
Untuk melihat console.trace () dalam tindakan, Anda dapat membuat tiga fungsi (seperti di bawah) dan meletakkan jejak timbunan di salah satu fungsi.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Di konsol penyemak imbas anda, hubungi atau mencetuskan fungsiSatu () dan anda akan mendapat jejak panggilan fungsi yang dicetak dalam Last In First Out Order (LIFO) kerana ia adalah timbunan.
Pelaksanaan Program Masa
Untuk jangka masa berapa lama operasi dijalankan dalam program anda, anda dapat menggunakan konsol.waktu () kaedah. konsol.waktu () biasanya digunakan bersama dengan konsol.timeEnd () kaedah di mana yang terakhir digunakan untuk menamatkan pemasa.
Anda boleh menjalankan sehingga 10,000 pemasa per halaman web, yang menekankan pentingnya melabel pemasa anda dengan betul.
Untuk masa berapa lama gelung memerlukan angka 1 hingga 50,000, anda boleh menggunakan pemasa seperti berikut.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Mengira
The console.count () kaedah digunakan untuk melacak berapa kali fungsi atau sebilangan kod dipanggil dalam program. Sebagai contoh, kita dapat melacak berapa kali loop untuk dilaksanakan seperti berikut:
for(i=0; i<4; i++ ){
console.count();
}Mesej Log Pengumpulan
Sama seperti kaedah pemasa, yang console.group () , dan console.groupEnd () kaedah biasanya digunakan secara berpasangan.
Kaedah kumpulan membantu anda mengatur pesanan log anda dengan lebih baik. Sebagai contoh, kita boleh membuat kumpulan mesej amaran dengan label amaran seperti berikut.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Kedua-dua mesej dalam kumpulan amaran dikategorikan secara visual seperti yang dilihat dalam output di bawah.
Mengosongkan Konsol
Akhir sekali, berikut adalah beberapa cara untuk membersihkan mesej log di konsol penyemak imbas anda.
Menggunakan console.clear () kaedah seperti berikut.
console.clear() Anda juga boleh membersihkan konsol penyemak imbas menggunakan pintasan papan kekunci penyemak imbas.
Google Chrome : Ctrl + L
Firefox : Ctrl + Shift + L
Menggunakan Konsol Penyemak Imbas dengan Sepenuhnya
Panduan ini telah menunjukkan kepada anda beberapa kaedah konsol penyemak imbas web yang tersedia untuk membantu anda membuat debug aplikasi front-end. API konsol sangat ringan, mudah dipelajari, dan disokong secara meluas di kebanyakan penyemak imbas moden.
video perdana amazon tidak boleh dimainkan
Buat pengesahan CAPTCHA untuk projek seterusnya anda dan uji kemahiran penyahpepijatan baru anda!
Berkongsi Berkongsi Tweet E-mel Buat Borang Pengesahan CAPTCHA Menggunakan HTML, CSS, dan JavaScriptSelamat laman web anda dengan pengesahan CAPTCHA.
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- Pembangunan Web
- JavaScript
Mwiza mengembangkan perisian secara profesional dan menulis secara meluas mengenai Linux dan pengaturcaraan front-end. Beberapa minatnya merangkumi sejarah, ekonomi, politik & seni bina perusahaan.
Lagi Dari Mwiza KumwendaLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan