Menggunakan Browser DevTools

Setiap browser modern membawa perangkat inspeksi bawaan yang disebut DevTools (Developer Tools). Dengan DevTools kita melihat struktur halaman yang sedang berjalan, mengintip gaya yang diterapkan browser, dan membaca pesan galat tanpa memasang program tambahan. Chapter ini memperkenalkan cara membuka DevTools serta tiga panel yang paling sering dipakai pemula: Elements, Console, dan Styles.

Membuka DevTools #

Tiga pintasan berikut membuka DevTools yang sama di Chrome dan Firefox; pilih yang paling nyaman:

• F12: satu tombol, paling cepat di Windows dan Linux.
• Ctrl+Shift+I (Cmd+Option+I pada macOS): pintasan setara di semua platform.
• Klik kanan elemen > Inspect: membuka DevTools dan langsung menyorot elemen yang diklik.

Cara ketiga paling sering dipakai: klik kanan elemen yang memancing penasaran, pilih Inspect, dan DevTools terbuka dengan elemen itu terpilih. Panel dapat ditampung di sisi kanan, sisi bawah, atau dilepas menjadi jendela sendiri lewat menu titik tiga di sudutnya.

Panel Elements: Melihat DOM Live #

Panel Elements menampilkan DOM (Document Object Model), yaitu pohon struktur dokumen yang sedang hidup di memori browser. Setiap elemen tampil sebagai simpul yang bisa dibuka seperti folder, dan menyentuh simpul menyorot area terkait di halaman. Begini cara membacanya:

1. Buka halaman latihan latihan-inspeksi.html di browser, lalu tekan F12.
2. Cari simpul <h1> di dalam <body>; browser menyorot teks heading saat simpul itu disentuh.
3. Klik dua kali teks di dalam simpul <h1>, ubah isinya, lalu tekan Enter; teks di halaman ikut berubah seketika.

Langkah ketiga menunjukkan sifat utama panel Elements: kita menyentuh halaman yang berjalan, bukan file di disk. Inspeksi yang sama berlaku untuk halaman mana pun, misalnya www.example.com, sehingga cara situs lain tersusun dapat kita bedah.

Panel Styles #

Saat sebuah simpul dipilih di Elements, panel Styles menampilkan aturan CSS yang berlaku pada elemen tersebut. Kita belum mempelajari CSS, jadi cukup tahu tiga hal: aturan tampil dari atas ke bawah sesuai urutan penerapannya, aturan yang dicoret berarti kalah oleh aturan lain, dan kotak centang tiap deklarasi dapat dimatikan-dinyalakan untuk melihat pengaruhnya. Panel ini menjadi tempat bereksperimen utama di section HTML dan CSS.

Panel Console #

Panel Console adalah tempat browser menyampaikan pesan: galat, peringatan, dan catatan. Pesan yang paling sering dilihat pemula: peringatan bahwa sebuah file tidak ditemukan, misalnya gambar dengan nama salah ketik. Console yang kosong adalah tanda baik bahwa halaman tidak menyampaikan keluhan apa pun. Kita akan memakai Console secara aktif pada section HTML dan JavaScript.

DOM Live Berbeda dari File Sumber #

Panel Elements memang dapat tampak berbeda dari file yang ditulis, dan perbedaan itu wajar:

Browser menguraikan file, memperbaiki markup yang dianggap kurang, lalu menyusun hasilnya menjadi DOM. Bila kita lupa menutup sebuah tag, Elements dapat menampilkan simpul penutup yang tidak pernah kita tulis. Panel ini mencerminkan pemahaman browser, bukan isi file mentah — penting diingat saat mencari penyebab perbedaan kode dan tampilan.

Contoh File untuk Inspeksi #

Simpan file berikut sebagai latihan-inspeksi.html, buka di browser, lalu ikuti langkah pada bagian Panel Elements:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Latihan Inspeksi DevTools</title>
</head>
<body>
  <h1>Selamat belajar, Siti!</h1>
  <p>Klik kanan teks ini, lalu pilih Inspect untuk membuka panel Elements.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Selamat belajar, Siti!" di bagian atas halaman
  - Satu paragraf instruksi di bawahnya
  - Teks "Latihan Inspeksi DevTools" pada tab browser

Mari kita telaah tiap bagian dalam latihan ini:

1. Baris 8 (<h1>Selamat belajar, Siti!</h1>): target inspeksi pertama. Ubah lewat Elements menjadi “Selamat belajar, Budi!” dan tampilan berubah seketika; setelah refresh judul kembali seperti semula karena file tidak berubah.
2. Baris 9 (<p>...</p>): paragraf untuk mempraktikkan klik kanan > Inspect; simpul <p> otomatis terpilih di Elements.
3. Baris 5 (<title>...): cari simpul <title> di dalam <head>; DevTools menampilkannya meski isinya tidak terlihat di badan halaman.

Dengan editor, browser, dan DevTools teruji, peralatan dasar lengkap. Section Struktur Dokumen berikutnya membongkar anatomi dokumen HTML baris demi baris, diawali Chapter Deklarasi Doctype.

Referensi resmi untuk pendalaman:

• Chrome DevTools Documentation
• Firefox DevTools User Docs
• MDN Web Docs — What are browser developer tools?
• MDN Web Docs — DOM

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Latihan Inspeksi DevTools</title>
</head>
<body>
  <h1>Selamat belajar, Siti!</h1>
  <p>Klik kanan teks ini, lalu pilih Inspect untuk membuka panel Elements.</p>
</body>
</html>