View Source dan Inspector

Budi melihat halaman promonya tampil tidak semestinya dan ingin tahu apa yang salah: apakah markup yang dikirim server keliru, atau keadaan halaman di browser yang tersesat? Untuk menjawab pertanyaan semacam itu, browser menyediakan dua pintu berbeda: view-source dan inspector. Keduanya mengarah ke halaman yang sama, tetapi yang dipamerkannya tidak sama.

view-source: File Sumber Mentah #

Ketik view-source: di depan URL pada address bar — misalnya view-source:www.example.com/promo.html — dan browser menampilkan isi file persis seperti yang tersimpan di server, lengkap dengan indentasi dan baris kosong. Pintu ini memperlihatkan sumber mentah: markup sebelum diparsing, sebelum CSS diterapkan, dan sebelum JavaScript mengubah apa pun. Sebagian besar browser mewarnai sintaks agar tag mudah dibaca, dan URL yang muncul di dalamnya dapat diklik.

Inspector: DOM yang Hidup #

Inspector — pada Chrome bernama panel Elements, pada Firefox bernama Page Inspector — menampilkan hal sebaliknya: DOM live yang dihasilkan parser, termasuk perubahan yang dilakukan JavaScript. Klik kanan pada bagian halaman lalu pilih Inspect, dan panel membuka node yang berhubungan dengan bagian yang diklik. Kita dapat menyunting teks, mengubah atribut, bahkan menambah node langsung di panel, dan hasilnya seketika tampak di halaman.

Semua suntingan pada panel bersifat sementara. Reload membangun ulang DOM dari file asli, sehingga suntingan hilang. Panel ini alat uji, bukan editor yang menyimpan — perbaikan yang terbukti tepat tetap harus ditulis ke file sumber.

Kapan Memakai yang Mana #

Perbedaan keduanya dapat dirangkum dalam satu tabel:

Aturan praktisnya sederhana: pertanyaan “apa yang tertulis di file” dijawab dengan view-source, sedangkan pertanyaan “apa yang sedang ada di memori browser” dijawab dengan inspector. Bila keduanya berbeda untuk bagian yang sama, ada parser yang memperbaiki markup atau JavaScript yang mengubah halaman.

Alur Investigasi Contoh #

Misalkan pengunjung melaporkan teks yang ikut tebal padahal tidak seharusnya. Pemeriksaan dimulai dari sumber yang dikirim server — pada potongan berikut, dugaan langsung muncul:

<p>Diskon <b>20 persen</i> berlaku untuk novel</p>

Berikut alur investigasi yang kita jalankan:

1. Buka view-source dan temukan paragraf bermasalah: tag penutup ditulis </i> padahal element yang dibuka adalah b — pasangan yang tidak cocok.
2. Beralih ke inspector dan sorot paragraf yang sama: DOM menampilkan teks “berlaku untuk novel” di dalam b, bukti parser mengabaikan tag penutup yang tidak berpasangan.
3. Perbaiki markup menjadi </b>, uji ulang di inspector, lalu simpan ke file.
4. Verifikasi lewat view-source bahwa file yang telah diperbaiki benar-benar terkirim ke browser.

Berlatih pada Halaman Kecil #

File berikut adalah halaman promo yang valid. Simpan sebagai contoh-inspector.html, buka di browser, lalu bandingkan tampilannya di view-source dan di panel Elements:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Promo Toko Buku</title>
</head>
<body>
  <h1>Promo Akhir Bulan</h1>
  <p>Diskon 20 persen untuk kategori novel.</p>
  <ul>
    <li>Harga berlaku hingga akhir bulan</li>
    <li>Anggota mendapat tambahan potongan</li>
  </ul>
  <p><a href="katalog.html">Lihat katalog</a> untuk daftar judul.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Heading "Promo Akhir Bulan" dan satu paragraf diskon
  - Daftar dua butir syarat promo
  - Tautan "Lihat katalog" pada bagian bawah

Berikut yang perlu diamati pada berkas tersebut:

1. Baris 6 (<title>): teks “Promo Toko Buku” tampil pada tab browser; node ini mudah ditemukan di panel Elements untuk latihan menyunting nilai.
2. Baris 9-10 (heading dan paragraf): sorot paragraf di halaman, klik kanan, pilih Inspect — panel membuka node yang sama di pohon DOM.
3. Baris 11-14 (<ul> dan dua <li>): nested pada markup berbanding lurus dengan kedalaman pohon pada panel Elements.
4. Baris 15 (<a href="katalog.html">): node anchor dengan atribut href; coba ubah nilainya di panel dan amati perubahan langsung di halaman.
5. Kedua tampilan file yang sama: view-source menampilkan seluruh baris di atas sebagai teks statis, sedangkan panel Elements menyajikan pohon objek yang hidup dan dapat disunting.

Dengan tiga alat ini — view-source, inspector, dan validator dari section Validation dan Code Quality — kita memiliki satu set pemeriksaan yang lengkap. Chapter berikutnya memanfaatkan sudut pandang mesin yang sama untuk membedah mekanisme validasi native pada form.

Referensi resmi untuk pendalaman:

• Chrome DevTools — Documentation
• Firefox DevTools — Page Inspector
• MDN Web Docs — Introduction to the DOM

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Promo Toko Buku</title>
</head>
<body>
  <h1>Promo Akhir Bulan</h1>
  <p>Diskon 20 persen untuk kategori novel.</p>
  <ul>
    <li>Harga berlaku hingga akhir bulan</li>
    <li>Anggota mendapat tambahan potongan</li>
  </ul>
  <p><a href="katalog.html">Lihat katalog</a> untuk daftar judul.</p>
</body>
</html>