Panduan Chrome DevTools Buat Pemula: Debugging Tanpa Pusing

Di artikel sebelumnya kita belajar cara membaca pesan error. Nah, sekarang kita naik level: kenalan sama senjata utama para web developer, yaitu Chrome DevTools. Kalau kamu selama ini ngoding cuma mengandalkan console.log bertebaran di mana-mana, siap-siap — hidup kamu bakal berubah setelah baca ini.

Apa Itu DevTools?

DevTools itu panel perkakas bawaan Google Chrome buat ngintip dan ngoprek website. Cara bukanya gampang: tekan F12 atau Ctrl+Shift+I (Windows/Linux), atau Cmd+Option+I (Mac). Bisa juga klik kanan di halaman → "Inspect".

Jangan takut sama tampilannya yang rame. Kita cuma butuh 4 tab utama buat mulai.

1. Tab Console: Lebih dari Sekadar console.log

Kamu pasti udah kenal console.log. Tapi Console punya trik lain yang jarang dipakai pemula:


// Menampilkan data dalam bentuk tabel — enak buat lihat array of objects
console.table([
  { nama: "Budi", umur: 25 },
  { nama: "Sari", umur: 23 }
]);

// Ngukur berapa lama kode jalan
console.time("proses");
for (let i = 0; i < 1000000; i++) { /* ... */ }
console.timeEnd("proses"); // proses: 12.5ms

// Nampilin pesan sesuai levelnya
console.warn("Hati-hati, stok menipis!");
console.error("Gagal menyimpan data!");

Terus, kalau ada error merah di Console, klik nama file di sebelah kanannya — Chrome langsung lompat ke baris kode yang bermasalah di tab Sources. Nggak perlu nebak-nebak lagi.

2. Tab Sources: Berhentiin Kode di Tengah Jalan

Ini fitur favorit saya: breakpoint. Caranya: buka file JavaScript kamu di tab Sources, lalu klik nomor barisnya. Muncul titik biru — artinya tiap kali kode jalan sampai baris itu, browser bakal berhenti dan kamu bisa ngintip isi semua variabel saat itu.


function hitungTotal(harga, jumlah) {
  let diskon = 0.1;          // <-- taruh breakpoint di sini
  let subtotal = harga * jumlah;
  let total = subtotal - (subtotal * diskon);
  return total;
}

Waktu berhenti di breakpoint, arahkan mouse ke variabel mana pun buat lihat isinya. Ada juga tombol Step Over (jalan satu baris), Step Into (masuk ke dalam fungsi), dan Step Out (keluar dari fungsi). Dengan ini, kamu nggak perlu lagi menebak "kok variabel ini isinya undefined ya?" — tinggal lihat langsung.

3. Tab Network: Ngintip Lalu Lintas Data

Pernah fetch API tapi datanya nggak muncul? Buka tab Network, refresh halaman, dan lihat daftar request yang keluar. Klik salah satunya buat lihat detail: URL-nya, status-nya (200 = sukses, 404 = nggak ketemu, 500 = server error), dan isi responsnya.

Ini ngebantu banget buat bedain masalah: frontend-nya yang salah, atau API-nya yang ngaco? Kalau respons API-nya bener tapi tampilannya salah, berarti bug-nya di kode tampilanmu. Kalau responsnya aja udah error, berarti masalahnya di backend atau URL-nya.

Tips: centang "Disable cache" biar tiap refresh beneran ambil data baru, bukan versi simpanan lama yang bikin kamu bingung "kok nggak berubah-berubah sih?"

4. Tab Elements: Oprek Tampilan Langsung

Di tab Elements kamu bisa lihat struktur HTML halaman dan ngubah langsung buat eksperimen. Klik elemen, ubah teksnya, ubah warnanya di panel Styles — perubahannya langsung kelihatan di halaman. Tenang, ini cuma sementara (nggak ngubah file aslimu), jadi aman buat coba-coba.

Kegunaannya? Misal layout-nya rusak, kamu bisa coba-coba CSS di sini sampai ketemu yang pas, baru salin ke file aslimu. Jauh lebih cepet daripada edit file → save → refresh → ulangi.

Kebiasaan yang Bikin Kamu Cepet Jago

Jangan langsung panik lihat error merah. Klik, baca, lompat ke barisnya. Seperti yang kita bahas di artikel sebelumnya, error itu lagi ngasih tahu kamu di mana masalahnya.

Pakai breakpoint sebelum menuhin kode dengan console.log. Lima menit belajar breakpoint bakal nghemat berjam-jam waktu debugging kamu ke depannya. Serius.

Biasakan buka Network tiap kali kerja sama API. Banyak bug "misterius" ternyata cuma salah URL atau respons yang nggak sesuai ekspektasi — kelihatan jelas di tab Network.

Penutup

DevTools itu kayak Swiss Army Knife buat web developer — awalnya kelihatan ribet, tapi sekali terbiasa kamu bakal heran gimana dulu bisa ngoding tanpa ini. Mulai dari Console dan breakpoint dulu, sisanya nyusul sambil jalan.

Coba sekarang: buka website favoritmu, tekan F12, dan iseng-iseng ubah teks judulnya di tab Elements. Selamat, kamu baru aja "ngehack" tampilan website (yang legal, tentunya).

Panduan Chrome DevTools Buat Pemula: Debugging Tanpa Pusing