Kebiasaan debugging yang baik membedakan pekerjaan yang lambat dan cepat. Section ini merangkum alur mendiagnosis masalah CSS dengan DevTools, menemukan CSS yang tidak valid, melacak sumber style, dan menguji lintas browser.

# DevTools Styles Panel

Kuasai panel Styles DevTools: membaca urutan aturan, coretan deklarasi, filter, emulator :hover, dan editor class.

Buka → # Computed Styles

Gunakan panel Computed sebagai alat kerja debugging: membaca nilai akhir, menyaring daftar properti, dan menelusuri sumber nilai.

Buka → # Layout Inspection

Periksa tata letak secara visual dengan overlay grid, flexbox, box model, dan scroll-snap di DevTools.

Buka → # Specificity Debugging

Baca angka specificity di DevTools, buktikan aturan mana yang menang, dan terapkan strategi perbaikan tanpa !important.

Buka → # Invalid CSS

Kenali bagaimana browser menandai dan melewati CSS yang tidak valid, serta kesalahan umum yang membuat gaya tidak berlaku.

Buka → # CSS Validation

Gunakan W3C CSS Validator dan stylelint untuk memeriksa stylesheet secara menyeluruh, serta pahami batas pemeriksaannya.

Buka → # Cross-browser Testing

Susun strategi pengujian lintas browser: menentukan target, memeriksa dukungan fitur, dan menyusun pola fallback dengan @supports.

Buka →