Panduan Perintah Konsol

Konsol pemaju pelayar web adalah alat debugging yang kuat, yang berkembang dari wartawan ralat mudah ke sistem pembalakan yang komprehensif. Mereka menjejaki aktiviti rangkaian, isu keselamatan, dan banyak lagi, dan membenarkan JavaScript mengeluarkan maklumat debugging melalui objek console . Walaupun sebahagian besarnya konsisten merentasi pelayar, perbezaan visual dan fungsi halus wujud. Panduan ini memberi tumpuan kepada Firefox dan Chrome, dengan kelebihan berasaskan kromium berkelakuan sama dengan Chrome. Spesifikasi WHATWG memberikan butiran lanjut.

Navigasi cepat

• Asas pembalakan
• Pembersihan konsol
• Kaedah pembalakan biasa
• Pemformatan rentetan
• Output gaya
• Pernyataan
• Mengira kejadian
• Memeriksa sifat
• Kelompok output
• Output jadual
• Operasi Masa
• Tumpukan jejak
• Debugging dengan debugger
• Utiliti konsol tambahan

Pembalakan dengan console.log()

Mulakan dengan memeriksa objek console itu sendiri:

 console.log (konsol);

Ini mendedahkan sifat objek, kebanyakannya berfungsi, dengan variasi khusus penyemak imbas kecil. Sebagai contoh, Chrome termasuk harta "memori", manakala Firefox menawarkan harta "nama". Perbezaan ini biasanya kecil.

Membersihkan konsol: console.clear()

Konsol berantakan menghalang debugging. Gunakan:

 console.clear ();

Ini membersihkan output konsol dan memaparkan mesej pengesahan (contohnya, "konsol telah dibersihkan").

Fungsi Pembalakan Biasa: debug() , error() , info() , log() , warn()

Lima fungsi kelihatan serupa tetapi menawarkan peningkatan khusus penyemak imbas:

 console.debug ();
Console.error ();
console.info ();
console.log ();
console.warn ();

Fungsi-fungsi ini berbeza sedikit dalam Chrome dan Firefox mengenai pengekodan warna dan penggunaan ikon, dan dalam tahap terperinci yang disediakan (contohnya, jejak timbunan untuk kesilapan). Pelayar menawarkan pilihan penapisan untuk mengawal penglihatan setiap jenis log.

Fungsi ini menerima pelbagai jenis data JavaScript (rentetan, nombor, objek, tatasusunan) sebagai argumen. Argumen berganda dipaparkan sejajar.

Penggantian rentetan

Pembalakan yang dipertingkatkan melibatkan penggantian rentetan untuk output yang lebih jelas:

 console.log ('Ini adalah rentetan: %s', 'string');
Console.log ('Ini adalah nombor: %i', 42);
console.log ('Ini adalah objek: %o', {object: 'object'});

Jenis penggantian yang disokong termasuk %s (string), %i (integer), %o (objek), dan banyak lagi. Literasi templat menawarkan alternatif yang lebih ringkas:

 console.log (`Ini adalah rentetan: $ {'string'}`);
Console.log (`Ini adalah nombor: $ {42}`);
console.log (`Ini adalah objek: $ {{object: 'object'}}`);

Kedua -dua kaedah boleh digabungkan untuk pemformatan yang fleksibel.

Output konsol gaya

Sapukan gaya CSS untuk meningkatkan kebolehbacaan:

 console.log ('%cthis adalah teks merah besar', 'warna: merah; saiz font: 30px;');

Perbezaan rendering khusus penyemak imbas mungkin berlaku. Pelbagai %c CHEACHANTERS membolehkan gaya yang bervariasi dalam satu pernyataan log tunggal. Pembolehubah boleh digunakan untuk menyimpan dan menggunakan semula gaya, meningkatkan organisasi kod.

Pernyataan: console.assert()

console.assert() mengambil keadaan Boolean. Jika palsu, ia mengeluarkan mesej ralat; Jika tidak, ia tidak melakukan apa -apa. Ini memudahkan pembalakan ralat bersyarat:

 biarkan nilai = 10;
console.assert (nilai <p> Chrome menyediakan jejak timbunan untuk pernyataan yang gagal, sementara Firefox tidak.</p><h3> Mengira kejadian: <code>count()</code> dan <code>countReset()</code>
</h3><p> Panggilan fungsi trek atau kejadian peristiwa menggunakan <code>console.count()</code> . Label pilihan membolehkan tuduhan berasingan:</p><pre class="brush:php;toolbar:false"> console.count ('myFunction');
console.count ('myFunction');
console.count ('lain -lainfunction');

console.countReset() menetapkan semula kaunter tertentu. Perbezaan khusus penyemak imbas wujud dalam bagaimana penetapan semula secara visual ditunjukkan.

Memeriksa objek: dir() dan dirxml()

console.dir() Memaparkan sifat objek dalam struktur seperti pokok, manakala console.dirxml() bertujuan untuk elemen XML/HTML. Firefox merawat kedua -dua alias untuk console.log() . console.dir() amat berguna untuk memeriksa elemen DOM, memberikan maklumat harta terperinci.

Output Pengumpulan: group() , groupCollapsed() , groupEnd()

Susun output konsol menggunakan console.group() , secara pilihan dengan label. console.groupCollapsed() pada mulanya runtuh kumpulan. console.groupEnd() menutup kumpulan. Sarang disokong. Gaya boleh digunakan untuk label kumpulan.

Output Jadual: console.table()

Paparan tatasusunan dan objek dalam format tabular menggunakan console.table() . Array objek diberikan dengan kunci sebagai tajuk lajur. Struktur data kompleks (tatasusunan tatasusunan, objek dengan nilai array) menghasilkan lebih banyak jadual yang rumit. Perbezaan penyemak imbas wujud dalam bagaimana objek bersarang dikendalikan dalam jadual.

Operasi Masa: time() , timeLog() , timeEnd()

Mengukur masa pelaksanaan kod menggunakan console.time() , console.timeLog() , dan console.timeEnd() . console.timeLog() menyediakan kemas kini masa pertengahan. Perbezaan khusus pelayar kecil dalam pemformatan output wujud.

Jejak Stack: console.trace()

Menjana jejak timbunan untuk menentukan asal pernyataan log tertentu.

Debugging dengan debugger

Kenyataan debugger menghentikan pelaksanaan dan membuka debugger pada baris itu. Ini bukan kaedah objek console tetapi alat penyahpepijatan yang kuat yang diintegrasikan dengan konsol.

Utiliti konsol tambahan

Beberapa utiliti khusus penyemak imbas wujud:

• $0 , $1 , dan lain -lain: Pintasan untuk mengakses elemen DOM yang dipilih di Inspektor.
• $('element') , $$('elements') : Pintasan untuk document.querySelector() dan document.querySelectorAll() .
• $x('xpath') : Penilai Ekspresi XPath.
• clear() : membersihkan konsol tanpa mesej.
• getEventListeners(object) : Menyenaraikan pendengar acara yang dilampirkan pada elemen DOM (krom sahaja).

Panduan komprehensif ini menyediakan asas yang kukuh untuk memanfaatkan perintah konsol pelayar untuk debugging dan pembangunan yang berkesan. Penjelajahan lanjut akan mendedahkan ciri dan keupayaan khusus pelayar.

Atas ialah kandungan terperinci Panduan Perintah Konsol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!