TL;DR
- Gunakan console.log() untuk menyimpan log biasa
- Gunakan console.error() dan console.warn() untuk hal-hal yang perlu diperhatikan
- Gunakan console.group() dan console.groupEnd() untuk mengelompokkan pesan terkait dan agar rapi
- Gunakan console.assert() untuk menampilkan pesan kesalahan bersyarat
Menulis ke konsol
Gunakan metode console.log() untuk menyimpan log biasa ke konsol. Perlu satu atau beberapa ekspresi sebagai parameter dan menulis nilainya saat ini ke konsol, menyatukan beberapa parameter menjadi baris yang dipisah spasi.
Mengeksekusi baris kode ini di JavaScript Anda:
console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());
Akan menghasilkan ini di Console:
Pelengkapan otomatis perintah
Bila Anda mengetik dalam Console, maka Console secara otomatis akan menampilkan menu tarik-turun pelengkapan otomatis untuk metode yang relevan sesuai dengan teks yang sudah Anda ketikkan. Ini berisi perintah sebelumnya yang telah Anda eksekusi.
Mengorganisir keluaran Console
Mengelompokkan pesan
Anda bisa mengelompokkan keluaran terkait dengan perintah grup. Perintah console.group() menggunakan satu parameter string untuk menyetel nama grup. Setelah memanggilnya di JavaScript Anda, konsol akan mulai mengelompokkan semua keluaran selanjutnya.
Untuk mengakhiri pengelompokan, Anda hanya perlu memanggil console.groupEnd() bila telah selesai.
Contoh masukan:
var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
console.log("User '%s' not authenticated.", user)
}
console.groupEnd();
Contoh keluaran:
Grup tersarang
Grup log juga bisa disarangkan dalam grup lain. Ini berguna untuk melihat grup besar dalam potongan lebih kecil.
Contoh ini menampilkan grup log untuk tahap autentikasi proses masuk:
var user = "jsmith", authenticated = true, authorized = true;
// Top-level group
console.group("Authenticating user '%s'", user);
if (authenticated) {
console.log("User '%s' was authenticated", user);
// Start nested group
console.group("Authorizing user '%s'", user);
if (authorized) {
console.log("User '%s' was authorized.", user);
}
// End nested group
console.groupEnd();
}
// End top-level group
console.groupEnd();
console.log("A group-less log trace.");
Dan inilah beberapa keluaran grup tersarang di konsol:
Menciutkan grup otomatis
Saat banyak menggunakan grup, bisa jadi akan sangat berguna bila melihatnya bukan seperti apa adanya. Untuk saat-saat seperti ini Anda bisa secara otomatis menciutkan grup dengan memanggil console.groupCollapsed() sebagai ganti console.group():
console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {
...
}
console.groupEnd();
groupCollapsed() keluaran:
Kesalahan dan peringatan
Kesalahan dan peringatan berfungsi sama seperti proses pembuatan log normal. Perbedaan satu-satunya adalah error() dan warn() memiliki gaya untuk menarik perhatian.
console.error()
Metode console.error() menampilkan ikon merah bersama teks pesan merah:
function connectToServer() {
console.error("Error: %s (%i)", "Server is not responding",500);
}
connectToServer();
berubah menjadi
console.warn()
Metode console.warn() menampilkan ikon peringatan kuning bersama teks pesan:
if(a.childNodes.length < 3 ) {
console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
}
berubah menjadi
Pernyataan
Metode console.assert() secara bersyarat menampilkan string kesalahan (parameternya kedua) hanya jika parameter pertamanya mengevaluasi ke false.
Pernyataan sederhana dan cara menampilkannya
Kode berikut akan menyebabkan pesan kesalahan di konsol hanya jika jumlah simpul anak yang dimiliki elemen list lebih besar dari 500.
console.assert(list.childNodes.length < 500, "Node count is > 500");
Bagaimana suatu pernyataan gagal ditampilkan di konsol:
Substitusi dan pemformatan string
Parameter pertama yang diteruskan ke suatu metode log mungkin berisi satu atau beberapa specifier format. Specifier format terdiri dari sebuah simbol % diikuti dengan huruf yang menunjukkan format yang diterapkan pada nilainya. Parameter setelah string berlaku pada placeholder sesuai urutan.
Contoh berikut menggunakan formatter string dan digit untuk memasukkan nilai ke dalam string keluaran. Anda akan melihat "Sam has 100 points" di konsol.
console.log("%s has %d points", "Sam", 100);
Daftar lengkap specifier format adalah:
| Specifier | Output |
|---|---|
| %s | Memformat nilai sebagai string |
| %i or %d | Memformat nilai sebagai integer |
| %f | Memformat nilai sebagai nilai floating point |
| %o | Memformat nilai sebagai elemen DOM yang bisa diperluas. Seperti terlihat di panel Elements |
| %O | Memformat nilai sebagai objek JavaScript yang bisa diperluas |
| %c | Menerapkan aturan CSS string keluaran sebagaimana ditetapkan oleh parameter kedua |
Contoh ini menggunakan specifier digit untuk memformat nilai document.childNodes.length. Ia juga menggunakan specifier floating point untuk memformat nilai Date.now().
Kode:
console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());
Keluaran dari contoh kode sebelumnya:
Menata gaya keluaran konsol dengan CSS
Specifier format CSS memungkinkan Anda menyesuaikan tampilan di konsol. Mulailah string dengan specifier dan berikan gaya yang ingin Anda terapkan sebagai parameter kedua.
Cobalah kode ini:
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
..untuk membuat keluaran log Anda menjadi besar dan berwarna biru:
Memformat elemen DOM sebagai objek JavaScript
Secara default, log elemen DOM dimasukkan ke konsol sebagai representasi dari HTML-nya, namun kadang-kadang Anda perlu mengakses elemen DOM sebagai objek JavaScript dan memeriksa propertinya. Anda bisa menggunakan specifier string %o untuk melakukannya (lihat di atas), atau menggunakan console.dir untuk mencapai hasil yang sama:
