Sulit membayangkan perkembangan pada JS tanpa mengeluarkan informasi ke konsol. Berbicara secara metaforis, console.log () adalah obat untuk sebagian besar penyakit kode.

Debugging hampir seperti menginvestigasi kejahatan di mana Anda adalah penyebab utamanya juga - Filipe Fortes

Tetapi selain fungsi console.log () yang umum digunakan, ada banyak lagi alat yang dapat sangat menyederhanakan proses. Mari kita lihat beberapa di antaranya dengan contoh sederhana.

console.log (), .info (), .debug (), .warn (), .error ()

Paling sederhana adalah mencetak garis dengan warna yang sesuai dengan jenis acara.

Kami menggunakan placeholder

Untuk mengganti data sejalan dengan pesan, lebih mudah menggunakan placeholder.

% o - untuk objek
% s - untuk string
% d - untuk desimal atau bilangan bulat

Tambahkan CSS

Tidak cukup info / peringatan / kesalahan? Itu tidak masalah! Anda dapat menerapkan CSS ke pesan konsol.

Ingin menerapkan CSS hanya untuk sebagian pesan? Ini dilakukan seperti ini:

console.dir ()

Seringkali jauh lebih nyaman untuk mencetak representasi JSON dari objek yang menarik bagi kami.

Output HTML

Elemen HTML di konsol dapat diperiksa dengan cara yang sama seperti di inspektur.

console.table ()

Ingin cepat melihat data dalam daftar dari JSON?

console.group () dan console.groupEnd ()

Pesan di konsol dapat dikelompokkan untuk kenyamanan.

console.count ()

Fungsi ini mencatat berapa kali dipanggil.

Jika label argumen opsional dilewatkan, fungsi akan mencatat jumlah panggilan dengan label yang sama.

Jika fungsinya dipanggil tanpa parameter, maka ia akan mencatat jumlah panggilan pada saluran yang sama .

console.assert ()

Sangat nyaman untuk digunakan ketika Anda ingin menampilkan informasi berdasarkan kondisi. Hanya pesan yang argumennya salah () salah akan dicetak.

console.trace ()

Metode ini akan membantu Anda memahami bagaimana kode mencapai titik tertentu.

console.time ()

Cara termudah untuk mengukur waktu eksekusi sepotong kode.

konsol.memory

Ingin akhirnya mengetahui kemana semua RAM gratis pergi?

console.clear ()

Gunakan untuk memulai dengan yang bersih. Benar-benar membersihkan konsol dari pesan sebelumnya.

// time and time end console.time("This"); let total = 0; for (let j = 0; j < 10000; j++) { total += j } console.log("Result", total); console.timeEnd("This"); // Memory console.memory // Assertion const errorMsg = 'Hey! The number is not even'; for (let number = 2; number <= 5; number += 1) { console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg}); } // Count for (let i = 0; i < 11; i++) { console.count(); } // group & groupEnd console.group(); console.log('Test message'); console.group(); console.log('Another message'); console.log('Something else'); console.groupEnd(); console.groupEnd(); // Table const items = [ { name: "chair", inventory: 5, unitPrice: 45.99 }, { name: "table", inventory: 10, unitPrice: 123.75 }, { name: "sofa", inventory: 2, unitPrice: 399.50 } ]; console.table(items) // Clear console.clear() // HTML Element let element = document.getElementsByTagName("BODY")[0]; console.log(element) // Dir const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"} console.dir(userInfo); // Color console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small'); // pass object, variable const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"} console.log("Hey %s, here is your details %o in form of object", "John", userDetails); // Default console.log('console.log'); console.info('console.info'); console.debug('console.debug'); console.warn('console.warn'); console.error('console.error');