Debugging dengan Browser

Setelah CSS terhubung, pekerjaan kita berpindah dari menulis menjadi memeriksa: warna tidak muncul, jarak terlihat kurang pas, atau ukuran meleset dari desain. Menambahkan kode tanpa arah hanya menunda masalah. DevTools menyediakan alur kerja yang sistematis untuk mengungkap penyebabnya, dan pada chapter ini kita menjalankannya untuk pertama kali.

Alur Debugging Pertama #

Setiap pemeriksaan CSS mengikuti pola yang sama:

1. Klik kanan elemen yang bermasalah, lalu pilih Inspect.
2. Panel Elements menandai elemen terpilih pada pohon DOM.
3. Panel Styles menampilkan seluruh aturan CSS yang berlaku pada elemen tersebut.
4. Baca aturan dari atas ke bawah, uji dugaan dengan mengubah nilai, lalu terapkan perbaikan pada berkas asli.

Kunci dari alur ini adalah panel Styles — mari kita kenali isinya.

Anatomi Panel Styles #

Untuk elemen <h1 class="judul-hero">, panel Styles kira-kira menampilkan:

element.style { }

.judul-hero {
  color: #1f6f54;
  font-size: 40px;
  margin: 0;
}

body {
  font-family: system-ui, sans-serif;
}

/* Inherited from body */

Tiga bagian yang perlu dibedakan:

• element.style: deklarasi yang ditulis lewat atribut style langsung pada elemen. Bagian ini kosong bila kita tidak memakai atribut tersebut, tetapi menjadi tempat deklarasi baru yang kita tambahkan secara manual di DevTools.
• Aturan yang cocok (matched rules): semua aturan yang selectornya mengenai elemen, tersusun sesuai urutan prioritasnya.
• Aturan yang diwariskan (inherited): nilai seperti font-family yang diterima elemen dari induknya, ditandai kelompok Inherited from … di bagian bawah.

Deklarasi Dicoret dan Deklarasi Diabaikan #

Dua tampilan khusus di panel Styles memberi informasi penting.

Teks dicoret berarti deklarasi kalah dan tidak diterapkan — misalnya karena ditimpa aturan lain. Nilai pemenangnya tampil di bawahnya; inilah cara DevTools menunjukkan hasil cascade secara langsung.

Ikon peringatan berarti deklarasi tidak dikenali browser, umumnya karena salah ketik. Bentuknya seperti berikut:

.tombol-simpan {
  color: bleu;              /* salah ketik: bukan nama warna yang dikenal */
  font-weight: 600;         /* tetap berlaku seperti biasa */
  background-color: #1f6f54;
}

Browser tidak menolak seluruh aturan; browser hanya melewati deklarasi yang salah lalu menerapkan sisanya. Pada contoh di atas, font-weight dan background-color tetap bekerja, sedangkan color diabaikan sehingga teks memakai warna bawaan. DevTools menandai baris yang bermasalah dengan ikon peringatan — menemukan tanda ini di panel Styles adalah cara tercepat menemukan salah ketik pada nilai deklarasi.

Mengubah dan Mematikan Deklarasi Langsung #

Panel Styles bukan tempat membaca saja; setiap bagiannya bisa diuji:

• Checkbox di depan tiap deklarasi: hapus centang untuk mematikan satu deklarasi dan lihat efeknya seketika — cara cepat mengetahui deklarasi mana yang menjadi penyebab masalah.
• Klik nilai untuk mengedit: ubah 40px menjadi 32px, atau ketik nama warna lain; halaman langsung merespons.
• Klik area kosong di dalam blok aturan: menambah deklarasi baru tanpa menyentuh editor.

Penting diingat: seluruh perubahan ini terjadi pada tampilan halaman di memori saja. Berkas styles.css di disk tidak tersentuh, dan perubahan bertahan hanya sampai halaman dimuat ulang. Karena itu, setiap perbaikan yang terbukti berhasil harus disalin ke berkas CSS di editor.

Latihan Singkat #

Simpan berkas berikut, buka di browser, lalu jalankan alur debugging:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Latihan debugging</title>
  <style>
    .tombol-simpan {
      color: bleu;
      background-color: #1f6f54;
      padding: 10px 18px;
    }
  </style>
</head>
<body>
  <button type="button" class="tombol-simpan">Simpan</button>
</body>
</html>

Inspect tombolnya: deklarasi color: bleu tampil dengan ikon peringatan karena bleu bukan nama warna yang sah — ejaan yang benar adalah blue. Perbaiki langsung di panel Styles, amati teks berubah, lalu tulis perbaikan yang sama pada berkasnya.

Checklist Alur Debugging #

Bila tampilan tidak sesuai harapan, jalankan daftar ini dari atas:

1. Pastikan berkas CSS tersimpan dan halaman sudah dimuat ulang.
2. Klik kanan elemen bermasalah → Inspect; cek apakah elemen yang terpilih sudah benar.
3. Baca panel Styles dari atas: aturan mana yang menang dan mana yang dicoret.
4. Cari ikon peringatan pada deklarasi yang tidak dikenali browser.
5. Uji dugaan: matikan atau ubah deklarasi lewat checkbox dan pengeditan langsung.
6. Salin perbaikan yang berhasil ke berkas CSS di editor, simpan, lalu muat ulang halaman.

Ringkasan #

Alur debugging CSS berputar pada panel Styles: pilih elemen lewat Inspect, baca aturan yang menang dan yang dicoret, waspadai ikon peringatan pada deklarasi salah ketik, lalu uji perbaikan secara langsung sebelum menuliskannya di editor. Perubahan di DevTools bersifat sementara — berkas di editor tetap menjadi sumber kebenaran. Dengan lingkungan dan alur kerja yang kini lengkap, kita siap penuh menulis CSS pada section berikutnya.