Debugging CSS

Gaya yang tidak muncul, elemen yang bergeser, konten yang terpotong — seluruh penulis CSS mengalaminya, termasuk yang berpengalaman. Perbedaannya bukan pada kebebasan dari kesalahan, melainkan pada kecepatan menemukan penyebabnya. Debugging yang baik mengikuti alur yang tetap, memakai alat inspeksi dari Chapter Browser DevTools dan cara membaca nilai dari Chapter Membaca Computed Styles . Chapter ini merangkai keduanya menjadi prosedur kerja yang dapat kita ulangi pada setiap bug.

Alur Debugging Empat Langkah #

1. Reproduksi: pastikan masalah muncul secara konsisten. Catat langkah yang menimbulkannya, ukuran layar, dan browser yang dipakai. Bug yang tidak dapat direproduksi tidak dapat dipastikan selesai.
2. Isolasi: persempit cakupan. Hapus atau nonaktifkan satu variabel demi satu variabel — satu elemen, satu properti, satu stylesheet — sampai masalah menyusut menjadi kasus terkecil yang masih bisa diamati.
3. Hipotesis: rumuskan dugaan yang bisa diuji, misalnya “teks meluber karena induk memakai overflow: hidden”, atau “warna tidak berlaku karena selector class salah eja”. Dugaan yang tepat membuat langkah berikutnya singkat.
4. Uji: ubah satu hal saja sesuai hipotesis, amati hasilnya, lalu ulangi dari langkah isolasi bila dugaan meleset. Mengubah lima properti sekaligus membuat kita tidak tahu mana yang berpengaruh.

Alur ini terasa formal, tetapi dalam praktiknya berjalan cepat: satu siklus penuh sering selesai dalam satu menit di DevTools.

Teknik Praktis di Panel Styles #

1. Nonaktifkan properti lewat kotak centang: hilangkan centang pada satu deklarasi dan amati halaman. Bila tampilan tidak berubah, deklarasi itu tidak berperan pada masalah — isolasi langsung berhasil.
2. Tambahkan outline sementara pada elemen yang dicurigai: outline: 2px solid rgb(220, 38, 38); menandai batas elemen tanpa menggeser elemen lain, karena outline tidak mengambil ruang layout — berbeda dengan border yang menambah ukuran.
3. Bandingkan dengan panel Computed: bila nilai final sudah benar tetapi tampilan masih salah, masalahnya berpindah ke luar properti tersebut — misalnya elemen lain yang menimpanya atau ukuran induknya.
4. Periksa sumber warisan: gulir ke bagian Inherited from pada panel Styles untuk melihat nilai yang diperoleh elemen dari induknya; banyak kasus warna dan font yang “tanpa sebab” sebenarnya bersumber di sini.
5. Saring dengan :not() saat menandai massal: bila perlu menyorot banyak elemen sekaligus, pola div:not(.kartu) { outline: 2px dashed rgb(37, 99, 235); } menandai semua div kecuali yang berclass kartu — lebih cepat daripada menandai satu per satu.

/* Alat-alat debug yang dipakai pada demo chapter ini */
.sorot {
  outline: 2px solid rgb(220, 38, 38); /* penanda batas; tidak memengaruhi layout */
}
.baris-flex {
  display: flex;
  gap: 12px;
}
.item-teks {
  flex: 1 1 0%;
  min-width: 0; /* tanpa ini, teks panjang menolak menyusut */
}
.kotak-potong {
  overflow: hidden; /* konten yang lebih tinggi dipangkas */
}

Hasil di Browser:

Kotak sorot menampilkan garis tepi 2px solid rgb(220, 38, 38) tanpa
menggeser elemen lain. Baris flex menerapkan display flex dengan
row-gap 12px; item teks di dalamnya memakai min-width 0 sehingga boleh
menyusut di bawah lebar kontennya, dan kotak potong memangkas bagian
konten yang lebih tinggi daripada dirinya dengan overflow hidden.

Mari kita telaah alat-alat di atas:

1. outline pada .sorot: outline digambar di luar batas elemen tanpa menambah ukuran, sehingga aman dipakai untuk menandai batas elemen selama sesi debug lalu dihapus setelahnya.
2. display: flex dan gap pada .baris-flex: container memakai flexbox dengan jarak 12px antaritem. Properti gap di flex dapat diperiksa melalui longhand row-gap di panel Computed.
3. min-width: 0 pada .item-teks: flex item secara bawaan membawa min-width: auto, yang menolak menyusut di bawah lebar konten terpanjang. Menuliskan min-width: 0 mengembalikan kebebasan menyusut — salah satu perbaikan paling sering dipakai di flexbox.
4. overflow: hidden pada .kotak-potong: bagian konten yang melampaui tinggi kotak dipangkas dari tampilan; properti ini sering menjadi hipotesis pertama ketika konten “menghilang”.

Kesalahan yang Paling Sering Terjadi #