Browser DevTools

Sebuah halaman web bisa terlihat sempurna di mata pengunjung, tetapi di dalamnya script JavaScript mungkin sedang gagal membaca elemen, mengirim data ke alamat yang salah, atau memunculkan galat yang tidak kita sadari. Masalahnya, kode yang berjalan di browser tidak menulis laporan ke mana pun; tanpa alat yang tepat, kita hanya menebak dari tampilan halaman.

Browser modern menyediakan jawabannya: DevTools, kumpulan panel bawaan untuk memeriksa HTML dan CSS, membaca pesan console, memantau berkas yang diunduh, sampai menghentikan eksekusi kode baris demi baris. Hampir semua pekerjaan JavaScript pada course ini — menguji potongan kode sampai melacak bug — akan melewati DevTools, sehingga kita wajib mengenalnya sejak sekarang.

Membuka DevTools #

DevTools terpasang di dalam browser yang sama dengan halaman yang sedang kita lihat, jadi tidak ada proses instalasi tambahan. Tabel berikut merangkum cara membukanya di tiga browser utama:

Setelah terbuka, DevTools muncul menempel di sisi jendela browser yang sama. Tab Console biasanya sudah aktif; bila tidak, klik tab berlabel Console.

Empat Panel yang Sering Kita Pakai #

DevTools berisi puluhan panel, tetapi untuk belajar JavaScript kita cukup empat:

Browser lain menamai panelnya sedikit berbeda: Firefox menyebut Elements sebagai Inspector dan Sources sebagai Debugger. Fungsinya tetap sama, jadi pemahaman kita berlaku di mana pun.

Menjalankan Ekspresi Langsung di Console #

Console bukan sekadar pembaca pesan; tab ini juga menerima ekspresi JavaScript yang kita ketik. Ketik sebuah ekspresi, tekan Enter, dan console segera menampilkan nilainya — tanpa membuat berkas, tanpa memuat ulang halaman. Pada tab Console, coba ketik dua baris berikut:

> 25000 * 3
75000
> "Toko".toUpperCase()
'TOKO'

Perhatikan dua hal. Pertama, hasil setiap ekspresi langsung muncul di baris berikutnya. Kedua, nilai string ditampilkan dengan tanda kutip tunggal — itu cara console menampilkan hasil evaluasi, bukan bagian dari nilai stringnya.

Console browser bekerja dengan prinsip yang sama seperti REPL di Node.js yang akan kita pakai pada chapter Pengenalan Node.js. Karena console.log berperilaku identik di keduanya, contoh-contoh pada course ini kita uji lewat terminal, dan hasilnya berlaku juga di tab Console.

Membaca Pesan Galat #

Galat penulisan nama adalah teman lama setiap programmer. Misalnya kita sengaja memanggil function yang tidak ada:

sapaPengguna("Budi");

Jika berkas ini dimuat oleh sebuah halaman, tab Console langsung menampilkan laporan berikut:

Output yang Dihasilkan (pada tab Console browser):

Uncaught ReferenceError: sapaPengguna is not defined

Tiga bagian pesan itu patut dibaca perlahan. Uncaught berarti galat tidak ditangani oleh kode apa pun. ReferenceError adalah jenis galatnya: JavaScript menemui nama yang tidak ia kenal. Kalimat terakhir menyebut masalah persisnya, sapaPengguna is not defined, sehingga kita tahu yang salah adalah nama function, bukan argument-nya.

Pesan galat tampil sebagai baris merah dengan tautan berkas dan nomor baris. Klik tautan itu dan DevTools membawa kita ke tab Sources, tepat di baris bermasalah. Menjalankan berkas yang sama di terminal (node galat-sengaja.js) memunculkan ReferenceError: sapaPengguna is not defined — teks yang sama, karena browser dan Node memakai engine V8 yang sama.

Menghentikan Eksekusi dengan Breakpoint #

console.log cepat, tetapi menyebarkan pesan ke mana-mana dan mengharuskan kita menulis ulang kode. DevTools menyediakan cara yang lebih bersih: breakpoint, titik henti yang kita pasang di satu baris. Saat eksekusi mencapai baris itu, browser menghentikan kode di tengah jalan dan membekukan seluruh nilai yang ada pada saat itu juga.

Cara memasangnya di tab Sources:

1. Buka tab Sources, lalu pilih berkas JavaScript halaman di panel kiri, misalnya latihan-inspeksi.js.
2. Klik nomor baris tempat eksekusi harus berhenti — muncul penanda biru.
3. Muat ulang halaman (F5 atau Ctrl+R). Eksekusi berhenti tepat sebelum baris tersebut.
4. Arahkan kursor ke nama variable seperti harga untuk melihat nilainya saat itu.
5. Tekan F8 (Resume) untuk melanjutkan sampai breakpoint berikutnya, atau F10 (Step over) untuk maju satu baris.

Contoh berkas yang cocok untuk latihan ini:

console.log("Memulai simulasi kasir");

const harga = 25000; // harga per item
const jumlah = 3;    // banyak item yang dibeli
const total = harga * jumlah;

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

Output yang Dihasilkan:

Memulai simulasi kasir
Total belanja: 75000

Keluaran di atas kita dapatkan dengan node latihan-inspeksi.js; di tab Console browser, dua pesan yang sama muncul saat halaman memuat berkas ini. Sekarang pasang breakpoint di baris 5 (const total = harga * jumlah;) lalu muat ulang halaman. Eksekusi berhenti sebelum perkalian berjalan; kursor di atas harga menampilkan 25000, kursor di atas jumlah menampilkan 3. Tekan F10 untuk maju satu baris, dan total kini menampilkan 75000.

Mari kita telaah berkasnya baris demi baris:

1. Baris 1 (console.log("Memulai simulasi kasir")): mencetak teks pembuka ke console; kita memakainya untuk memastikan script benar-benar berjalan.
2. Baris 3 (const harga = 25000;): memberi nama harga pada nilai 25000. Kata kunci const dibahas tuntas di section Dasar Pemrograman; untuk sekarang anggap saja ini cara memberi nama pada nilai.
3. Baris 4 (const jumlah = 3;): memberi nama jumlah pada nilai 3.
4. Baris 5 (const total = harga * jumlah;): engine mengevaluasi 25000 * 3 menjadi 75000, lalu menyimpannya dengan nama total.
5. Baris 7 (console.log("Total belanja:", total)): mencetak label beserta isi total dalam satu baris.

Alur kerja dasar sudah lengkap: buka DevTools dengan F12, baca pesan di tab Console, dan pasang breakpoint di tab Sources bila perlu memeriksa nilai di tengah eksekusi. Chapter berikutnya memperdalam tab Console: method-method untuk menampilkan pesan yang lebih informatif.

sapaPengguna("Budi");

console.log("Memulai simulasi kasir");

const harga = 25000; // harga per item
const jumlah = 3;    // banyak item yang dibeli
const total = harga * jumlah;

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