console dan DevTools JavaScript: Debug Lebih dari console.log

Console Lebih dari Sekadar log

console.log adalah alat debug pertama yang dipelajari kebanyakan orang, dan banyak yang tidak pernah beralih darinya. Memang berfungsi, tetapi objek console punya belasan method lain yang membuat debug lebih cepat dan lebih jelas. Begitu kamu terbiasa dengan DevTools yang sebenarnya, seperti breakpoint, call stack, dan watch expression, kamu akan jauh lebih jarang memakai log.

Mulai dengan survei singkat:

console.log("standard message");
console.info("informational");
console.warn("something looks off");
console.error("something broke");

Keempatnya mencetak ke console yang sama, tetapi browser menampilkannya dengan gaya berbeda: peringatan mendapat latar kuning, error mendapat warna merah dan ikon, dan keduanya menyertakan stack trace. Filter di DevTools memungkinkanmu menyembunyikan atau memisahkan setiap level, yang penting begitu sebuah aplikasi menghasilkan ratusan pesan.

Mencetak Banyak Nilai dengan Cara Praktis

Saat ingin melihat beberapa variabel sekaligus, jangan gabungkan menjadi satu string. Berikan sebagai argumen terpisah, atau lebih baik lagi, bungkus dalam sebuah objek agar setiap nilai punya label:

const user = { name: "Rosa", age: 30 };
const count = 3;

// Hard to read - which value is which?
console.log(user.name + " " + user.age + " " + count);

// Better - each value is labeled and kept as its real type.
console.log({ user, count });

Trik { user, count } memakai shorthand objek: nama variabel menjadi key-nya. Di console kamu akan melihat { user: {...}, count: 3 } dan bisa membuka user untuk memeriksanya. Struktur objeknya tidak hilang karena diubah menjadi string.

console.table untuk Array Berisi Objek

Saat kamu memandangi array berisi objek, console.log memberimu tampilan yang terlipat dan berantakan. console.table menampilkannya sebagai tabel sungguhan:

const users = [
    { name: "Ada", age: 36, role: "admin" },
    { name: "Boris", age: 28, role: "user" },
    { name: "Chen", age: 42, role: "user" },
];

console.table(users);
console.table(users, ["name", "role"]);

Di console browser, panggilan pertama mencetak ketiga baris dengan kolom yang bisa diurutkan. Panggilan kedua membatasinya hanya pada name dan role. Ini peningkatan besar untuk apa pun yang berbentuk data: response API, hasil query, CSV yang sudah di-parse.

console.dir vs console.log

Keduanya terlihat mirip, tetapi berperilaku berbeda untuk elemen DOM:

const el = document.querySelector("button");

console.log(el);   // prints the HTML: <button>Click me</button>
console.dir(el);   // prints the JS object view with all properties

log memformat elemen sebagai HTML. dir menunjukkan objeknya: setiap property, setiap event handler, setiap referensi computed style. Saat kamu ingin tahu method atau atribut apa saja yang dimiliki sebuah elemen, pakai dir.

Mengelompokkan Output yang Berkaitan

Sesi debug yang panjang memenuhi console dengan gangguan. console.group dan console.groupEnd membungkus pesan-pesan yang berkaitan menjadi blok yang bisa dilipat:

function processOrder(order) {
    console.group(`Order ${order.id}`);
    console.log("items:", order.items);
    console.log("total:", order.total);
    console.warn("shipping not set");
    console.groupEnd();
}

processOrder({ id: 42, items: ["apple", "pear"], total: 3.5 });
processOrder({ id: 43, items: ["bread"], total: 2.0 });

Setiap panggilan menghasilkan grup bernama yang bisa kamu lipat. Pakai console.groupCollapsed kalau kamu ingin grup langsung terlipat secara default, berguna saat kamu hanya ingin membuka yang terlihat mencurigakan.

Mengukur Waktu Kode dengan console.time

Untuk pengecekan performa yang cepat, console.time dan console.timeEnd sulit dikalahkan:

console.time("sum");
let total = 0;
for (let i = 0; i < 1_000_000; i++) {
    total += i;
}
console.timeEnd("sum");

console.log("total:", total);

Label di time dan timeEnd harus sama. Kamu bisa menjalankan beberapa timer sekaligus dengan label berbeda. Untuk hal yang lebih serius daripada "apakah loop ini lambat?", beralihlah ke panel Performance di DevTools, yang merekam timeline lengkap dan flame chart.

Assertion: Mencetak Hanya Saat Ada yang Salah

console.assert hanya mencetak saat kondisinya falsy. Ini cara yang tenang untuk meninggalkan pengecekan kewajaran di kodemu tanpa membanjiri console saat semuanya baik-baik saja:

function setAge(user, age) {
    console.assert(age >= 0, "age should be non-negative", { user, age });
    user.age = age;
}

setAge({ name: "Ada" }, 36);   // silent - assertion passed
setAge({ name: "Boris" }, -1); // prints: Assertion failed: age should be non-negative

Bagus untuk invarian yang seharusnya selalu berlaku. Kurang tepat untuk hal yang memang wajar bisa gagal; untuk itu, lemparkan error.

Stack Trace Kapan Saja

console.trace mencetak call stack saat ini tanpa melempar apa pun. Berguna saat kamu mencoba mencari tahu siapa yang memanggil sebuah fungsi:

function inner() {
    console.trace("inner was called");
}

function outer() {
    inner();
}

outer();

Output-nya menunjukkan inner → outer → (top level). Di aplikasi sungguhan, beginilah caramu menemukan bahwa click handler yang sedang kamu debug ternyata dipicu dari tiga tempat berbeda.

Pernyataan debugger

Cara tercepat untuk menghentikan sementara eksekusi JavaScript hanya butuh satu kata:

function computeTotal(items) {
    const subtotal = items.reduce((s, i) => s + i.price, 0);
    debugger;
    return subtotal * 1.08;
}

Saat DevTools terbuka, debugger; bekerja seperti breakpoint: eksekusi berhenti di baris itu dan kamu mendapat debugger lengkap, yaitu variabel dalam scope, call stack, kontrol step-over dan step-into, serta kemampuan mengevaluasi ekspresi terhadap state saat ini. Saat DevTools tertutup, debugger; tidak melakukan apa-apa.

Pertama kali kamu memakai debugger sungguhan alih-alih console.log, rasanya seperti punya kekuatan super. Kamu bisa melihat setiap variabel dalam scope tanpa harus memutuskan dulu apa yang mau dicetak. Kamu bisa menelusuri percabangan langkah demi langkah dan melihat cabang mana yang berjalan. Memperbaiki bug yang rumit menyusut dari hitungan menit menjadi detik.

Hapus baris debugger sebelum commit, atau lebih baik lagi, pasang breakpoint langsung di DevTools dengan mengklik nomor baris di panel Sources.

Trik DevTools yang Layak Diketahui

Beberapa fitur yang terlewat oleh banyak orang selama bertahun-tahun:

• Breakpoint bersyarat: klik kanan nomor baris di Sources dan atur kondisi seperti user.id === 42. Breakpoint hanya aktif saat kondisinya true.
• Logpoint: menu yang sama, "Add logpoint." Mencetak pesan tanpa menghentikan eksekusi dan tanpa mengubah kodemu.
• $_ di console: ekspresi terakhir yang dievaluasi. Jalankan sesuatu, lalu pakai $_ untuk mengambil hasilnya.
• $0: elemen yang sedang dipilih di panel Elements. $0.textContent memeriksa elemen apa pun yang kamu klik.
• Salin sebagai objek: klik kanan nilai apa pun di console dan pilih "Store as global variable." Kamu mendapat temp1, temp2, dan seterusnya untuk diutak-atik.
• Panel Network → Copy as fetch: mengubah request apa pun menjadi panggilan fetch() yang bisa kamu tempel ke console dan ubah.

Tidak ada yang wajib. Semuanya menghemat waktu begitu sudah jadi kebiasaan.

Bersih-Bersih Sebelum Rilis

Sisa panggilan console.log tidak berbahaya saat development, tetapi bikin berisik di production. Beberapa kebiasaan yang membantu:

• Pakai aturan lint (no-console di ESLint) untuk menandai log yang tertinggal, dengan pengecualian untuk warn dan error.
• Bungkus logging yang panjang dengan pengecekan: if (process.env.NODE_ENV !== "production") console.log(...).
• Utamakan console.debug untuk output tingkat trace, karena kebanyakan bundler dan pengumpul log bisa menyaringnya.
• Lebih baik lagi: pakai module logger kecil (atau library seperti debug) agar kamu bisa menyalakan dan mematikan kategori log tanpa mengubah kode.

Logging tidak gratis. Setiap panggilan mengubah argumennya menjadi teks dan menulis ke buffer. Di loop yang sering berjalan, satu log yang terlupa bisa memperlambat program secara terukur.

Berikutnya: Regular Expression

Kamu akan sering melakukan debug pada kode pengolah string, dan banyak dari kode itu melibatkan regex, fitur paling ringkas sekaligus paling misterius di bahasa ini. Bab berikutnya dimulai dengan tur ringan tentang regular expression JavaScript dan method-method yang memakainya.