Belajar JavaScript - Debugging dan Console Tools

#Pendahuluan

Menulis kode hanya separuh pekerjaan — separuh lainnya adalah menemukan kenapa kode tidak melakukan apa yang diinginkan. Episode 19 mengubah kalian dari penulis kode menjadi debugger: orang yang bisa membaca gejala, menemukan akar masalah, dan memperbaikinya dengan cepat.

Kabar baiknya: browser modern sudah menyediakan alat debugging yang sangat lengkap lewat DevTools. Yang sering kurang bukan alatnya, melainkan tekniknya. Episode ini membahas teknik itu: menggunakan Console API secara strategis, memeriksa eksekusi dengan breakpoint, membaca error dan stack trace, lalu menganalisis request jaringan dan performa.

Satu perubahan pola pikir yang menentukan: console.log bukan satu-satunya alat, dan bukan selalu yang terbaik. Kalian akan melihat kapan console.table mengalahkan console.log, dan kapan breakpoint jauh lebih ampuh daripada mencetak nilai.

#Console API untuk Observasi

#Log, Warn, dan Error

Console API menyediakan level yang berbeda untuk pesan yang berbeda, dan DevTools mewarnainya sehingga mudah dipindai:

Level pesan console

console.log("Informasi normal");
console.warn("Peringatan, ini mencurigakan");
console.error("Kesalahan fatal yang perlu diselidiki");

console.warn dan console.error menampilkan pesan dengan ikon dan warna berbeda. Yang penting bukan sekadar estetika: console juga bisa difilter berdasarkan level, sehingga memisahkan info, peringatan, dan error membantu menemukan masalah di antara ribuan pesan.

#table untuk Data Berstruktur

Untuk daftar objek, console.table menampilkan tabel yang jauh lebih mudah dibaca daripada objek mentah:

console.table untuk array objek

const tim = [
  { nama: "Arman", role: "Backend" },
  { nama: "Sari", role: "Frontend" },
  { nama: "Budi", role: "DevOps" },
];
 
console.table(tim);

console.table(tim) menampilkan array objek sebagai tabel dengan kolom nama dan role. Melihat sepuluh baris data dalam bentuk tabel jauh lebih cepat menemukan anomali daripada menelusuri objek bersarang di console. Ini alat pertama yang dipakai saat data terlihat salah.

#group dan time untuk Struktur dan Durasi

console.group mengelompokkan pesan, dan console.time mengukur durasi eksekusi:

group dan time

console.time("proses-data");
 
console.group("Mulai pemrosesan");
console.log("Langkah 1 selesai");
console.log("Langkah 2 selesai");
console.groupEnd();
 
console.timeEnd("proses-data");

console.group("Mulai pemrosesan") mengindentasi pesan di dalamnya sampai groupEnd. console.time("proses-data") dan console.timeEnd("proses-data") mencetak berapa milidetik yang dilewati antar keduanya — cara cepat mendeteksi fungsi yang lambat tanpa tool tambahan.

#debugger dan Breakpoint

#Pernyataan debugger

console.log menampilkan nilai pada satu momen, tapi untuk memahami alur, kalian perlu menjeda eksekusi. Pernyataan debugger menjeda kode di titik itu saat DevTools terbuka:

Pernyataan debugger

function hitungTotal(item) {
  let total = 0;
  for (const harga of item) {
    debugger;
    total += harga;
  }
  return total;
}
 
const hasil = hitungTotal([10000, 20000, 30000]);
console.log(hasil);

debugger; menjeda eksekusi di dalam loop, memberi kesempatan memeriksa nilai harga dan total di tab Sources. Saat DevTools tertutup, pernyataan ini diabaikan dan kode berjalan normal. debugger bukan pengganti breakpoint manual — ini breakpoint yang ikut tersimpan di kode.

#Breakpoint di DevTools

Breakpoint manual di DevTools lebih fleksibel daripada pernyataan debugger:

• Klik nomor baris di tab Sources untuk menaruh breakpoint.
• Jalankan ulang halaman; eksekusi berhenti di baris itu.
• Periksa variabel di panel Scope, dan langkahi eksekusi dengan tombol step.

Breakpoint memungkinkan kalian memeriksa keadaan — variabel, scope, dan stack — pada momen persis sebelum baris berjalan. Ini mengubah debugging dari menebak menjadi mengamati.

#Membaca Error dan Stack Trace

#Anatomi Stack Trace

Ketika error terjadi, console menampilkan stack trace — daftar pemanggilan yang mengarah ke titik error. Membacanya dari bawah ke atas menunjukkan alur masuk:

Error dengan stack trace

function lapisKetiga() {
  throw new Error("Gagal di lapisan terdalam");
}
 
function lapisKedua() {
  lapisKetiga();
}
 
function lapisPertama() {
  lapisKedua();
}
 
lapisPertama();

throw new Error("Gagal di lapisan terdalam") menghasilkan stack trace yang menyebut baris di lapisKetiga, lalu lapisKedua, lalu lapisPertama. Baris paling atas adalah lokasi error; sisanya adalah jalan masuk. Melatih membaca stack trace adalah keterampilan paling berharga dalam debugging.

#Mengisolasi Masalah

Pendekatan sistematis yang bisa kalian terapkan selalu:

• Reproduksi: pastikan kalian bisa memicu error secara konsisten.
• Isolasi: persempit lokasi — cek satu bagian, bukan semua.
• Observasi: gunakan console.table atau breakpoint untuk melihat data.
• Verifikasi: setelah perbaikan, pastikan error tidak muncul lagi.

Sebagian besar debugging yang lama justru karena langsung mengubah kode tanpa mengamati data. console.log di titik masuk dan keluar fungsi sering sudah cukup menemukan lokasi masalah.

#Tools DevTools untuk Masalah Nyata

#Memeriksa Request Jaringan

Tab Network menunjukkan setiap request yang dikirim halaman: method, status, ukuran, dan durasi. Ini alat utama saat API bermasalah:

curl -i https://jsonplaceholder.typicode.com/posts/1

curl -i di terminal menampilkan status, header, dan body respons — cara cepat memastikan endpoint bekerja sebelum menyalahkan kode JavaScript. Kalau curl berhasil tapi aplikasi gagal, masalahnya di kode client; kalau curl gagal, masalahnya di server atau jaringan.

#Menelusuri Performa

Tab Performance merekam aktivitas halaman dan menunjukkan tugas mana yang memakan waktu. Ini pintu masuk ke optimasi yang akan kita bahas di episode 22: menemukan fungsi yang lambat, layout yang mahal, atau render yang berulang.

Pola yang sering ditemukan: loop besar yang seharusnya diganti map, atau operasi DOM berulang yang seharusnya di-batch. Data dari tab Performance mengarahkan perbaikan dengan bukti, bukan dengan tebakan.

#Penutup

Episode 19 melatih kalian menjadi debugger: memakai Console API dengan level dan format yang tepat, menjeda eksekusi dengan debugger dan breakpoint, membaca error beserta stack trace, serta memanfaatkan tab Network dan Performance di DevTools.

Inti yang harus dibawa pulang:

• Gunakan console.warn dan console.error sesuai tingkat keparahan.
• console.table menampilkan array objek jauh lebih mudah dibaca.
• debugger menjeda eksekusi saat DevTools terbuka.
• Baca stack trace dari atas ke bawah untuk melacak alur.
• Uji endpoint dengan curl sebelum menyalahkan kode client.
• Persempit masalah sebelum mengubah kode — jangan menebak.

Di episode 20 selanjutnya kita akan membahas JavaScript modern dengan linting, formatting, dan tooling — mengotomatisasi kualitas kode dengan ESLint dan Prettier, menyusun npm scripts, serta menerapkan aturan yang konsisten di seluruh project. Inilah cara kode tim profesional dijaga tetap bersih.