Lebih dari console.log()
Kebanyakan developer hanya menggunakan console.log(), padahal object console punya banyak method berguna lainnya.
console.log() — Output Biasa
// Basic
console.log("Hello");
console.log("User:", user);
// Multiple values
console.log("x =", x, "y =", y);
// Template literal (lebih rapi)
console.log(`User ${user.name} berumur ${user.age} tahun`);
// Dengan styling (di browser)
console.log("%cPeringatan!", "color: red; font-size: 20px;");
console.error() — Error Message
console.error("Gagal mengambil data!");
// Ditampilkan dengan warna merah dan stack trace
// Berguna untuk membedakan error dari log biasa
console.warn() — Warning
console.warn("API key akan expired dalam 7 hari");
// Ditampilkan dengan warna kuning
console.table() — Data Tabular
const users = [
{ nama: "Budi", umur: 25, kota: "Jakarta" },
{ nama: "Siti", umur: 30, kota: "Bandung" },
{ nama: "Andi", umur: 22, kota: "Surabaya" }
];
console.table(users);
// Menampilkan data dalam format tabel yang rapi
// ┌─────────┬────────┬─────┬───────────┐
// │ (index) │ nama │ umur│ kota │
// ├─────────┼────────┼─────┼───────────┤
// │ 0 │ "Budi" │ 25 │ "Jakarta" │
// │ 1 │ "Siti" │ 30 │ "Bandung" │
// │ 2 │ "Andi" │ 22 │ "Surabaya"│
// └─────────┴────────┴─────┴───────────┘
// Tampilkan kolom tertentu saja
console.table(users, ["nama", "kota"]);
console.group() — Grouping
console.group("User Data");
console.log("Nama: Budi");
console.log("Email: [email protected]");
console.group("Alamat");
console.log("Jalan: Sudirman");
console.log("Kota: Jakarta");
console.groupEnd();
console.groupEnd();
// Output terstruktur:
// ▼ User Data
// Nama: Budi
// Email: [email protected]
// ▼ Alamat
// Jalan: Sudirman
// Kota: Jakarta
// groupCollapsed — sama tapi tertutup by default
console.groupCollapsed("Detail (klik untuk buka)");
console.log("Info tersembunyi");
console.groupEnd();
console.time() — Ukur Waktu Eksekusi
console.time("fetch-data");
// ... operasi yang ingin diukur ...
fetch("/api/users")
.then(res => res.json())
.then(data => {
console.timeEnd("fetch-data");
// Output: fetch-data: 234.567ms
});
// Untuk multiple timing
console.time("total");
console.time("step-1");
// ... step 1 ...
console.timeEnd("step-1"); // step-1: 50ms
console.time("step-2");
// ... step 2 ...
console.timeEnd("step-2"); // step-2: 180ms
console.timeEnd("total"); // total: 230ms
console.count() — Hitung Pemanggilan
function handleClick(button) {
console.count(button);
}
handleClick("save"); // save: 1
handleClick("save"); // save: 2
handleClick("delete"); // delete: 1
handleClick("save"); // save: 3
// Reset counter
console.countReset("save");
handleClick("save"); // save: 1
console.assert() — Conditional Log
// Hanya tampilkan pesan jika kondisi FALSE
const umur = 15;
console.assert(umur >= 18, "User belum cukup umur!", { umur });
// Output (karena 15 < 18):
// Assertion failed: User belum cukup umur! {umur: 15}
const saldo = 100;
console.assert(saldo > 0, "Saldo negatif!");
// Tidak ada output (karena 100 > 0)
console.trace() — Stack Trace
function c() {
console.trace("Siapa yang memanggil saya?");
}
function b() { c(); }
function a() { b(); }
a();
// Output:
// Siapa yang memanggil saya?
// c @ script.js:2
// b @ script.js:4
// a @ script.js:5
console.dir() — Object Detail
// Untuk DOM element, console.log menampilkan HTML
console.log(document.body); // <body>...</body>
// console.dir menampilkan sebagai JavaScript object
console.dir(document.body); // body { classList: ..., children: ... }
console.clear() — Bersihkan Console
console.clear();
// Menghapus semua output di console
Tips Penggunaan
- Gunakan
console.table()untuk array of objects - Gunakan
console.group()untuk output yang banyak - Gunakan
console.time()untuk profiling sederhana - Gunakan
console.error()danconsole.warn()untuk severity yang jelas - Hapus semua console.log sebelum deploy ke production!
// Cara cepat hapus semua console.log di production
// Di build tool (webpack/vite):
// drop_console: true
