KAL
Menu

Debug CSS

Penggunaan computed style DevTools, penelusuran cascade, dan teknik isolasi masalah.

Daftar isi

Gaya yang tidak muncul atau muncul berbeda dari perkiraan merupakan pekerjaan penelusuran yang rutin dalam penataan gaya. Topik ini membahas alur kerja penelusurannya dengan DevTools, mulai dari panel Elements dengan tab Styles, tab Computed untuk nilai akhir, penyaringan asal aturan, teknik isolasi masalah, hingga penyebab umum gaya yang tidak berlaku. Seluruh alat yang disebut tersedia pada browser modern tanpa pemasangan tambahan.

Panel Elements dan tab Styles#

Penelusuran dimulai dengan mengeklik kanan elemen yang menampilkan masalah lalu memilih Inspect, dan panel Elements akan menyorot elemen tersebut pada markahnya. Tab Styles di sebelahnya mencantumkan seluruh aturan yang berlaku pada elemen itu sesuai urutan cascade. Deklarasi yang kalah dalam cascade ditampilkan dengan coretan, sedangkan deklarasi pemenangnya tampak tanpa coretan.

Tab Styles juga memuat informasi asal setiap aturan, yaitu nama berkas stylesheet dan nomor barisnya. Gaya inline elemen ditampilkan paling atas, diikuti aturan penulis, dan bagian bawahnya memuat gaya bawaan browser. Susunan tersebut memperlihatkan rantai kemenangan cascade secara langsung, sehingga aturan yang harus diubah untuk memperbaiki tampilan dapat ditentukan dengan cepat.

Setiap deklarasi pada tab ini disertai kotak centang. Menghilangkan centangnya mematikan satu deklarasi, dan menyalakannya kembali memulihkan deklarasi tersebut, sehingga hipotesis tentang penyebab masalah dapat diuji tanpa menyunting berkas. Perubahan apa pun yang dilakukan pada panel ini bersifat sementara dan hilang saat halaman dimuat ulang.

Tab Computed untuk nilai akhir#

Tab Computed menampilkan nilai akhir setiap properti pada elemen terpilih, yaitu nilai yang sudah melalui seluruh proses cascade dan inheritance. Tampilan ini berguna ketika aturan yang berlaku banyak, karena pertanyaan mengenai warna akhir dan ukuran akhir dijawab dalam satu daftar. Nilai yang ditulis dengan persen atau rem ditampilkan setelah dihitung menjadi piksel.

Kotak pencarian pada tab Computed menyaring daftar berdasarkan nama properti, misalnya mencari font-size pada elemen yang ukurannya tampak salah. Properti yang diwariskan dan yang tidak diwariskan dapat dibedakan pada daftar ini. Penelusuran dari nilai akhir ke aturan sumbernya dilakukan dengan memperluas butir properti, dan aturan pemenangnya akan ditampilkan.

Perbandingan tab Styles dan tab Computed membentuk pasangan kerja yang saling melengkapi. Tab Styles menjawab aturan mana yang menang dan mengapa, sedangkan tab Computed menjawab berapa nilai akhirnya. Masalah yang tampak pada tab Computed selalu dapat ditelusuri asalnya kembali melalui tab Styles.

Menyaring asal aturan dan state#

Apabila terdapat beberapa stylesheet, pertanyaan utamanya adalah berkas mana yang menyediakan deklarasi pemenang. Tab Styles menjawabnya karena setiap kelompok aturan diberi label asal berkasnya, dan aturan dari berkas yang berbeda ditampilkan berurutan sesuai urutan muatnya. Perubahan urutan tag link dapat diamati langsung dari susunan ini.

Keadaan semu membantu penelusuran gaya yang hanya muncul pada kondisi tertentu. Panel Styles menyediakan sarana memaksa keadaan :hover, :focus, dan :active pada elemen terpilih, sehingga aturan keadaan tersebut tampil dan dapat diuji tanpa berpindah-pindah antara panel dan halaman. Filter pencarian pada tab Styles juga dapat menyaring aturan berdasarkan nama properti atau nilai tertentu.

Susunan label asal aturan juga memperlihatkan kontribusi pustaka pihak ketiga. Gaya yang ternyata berasal dari berkas pustaka dapat dipastikan sebelum menyunting aturan proyek, sehingga perbaikan diarahkan ke tempat yang benar. Langkah kecil ini mencegah penyuntingan dilakukan pada berkas yang tidak pernah memuat aturan bermasalah.

Teknik isolasi masalah#

Isolasi masalah dilakukan dengan menyempitkan lingkup dugaan satu langkah demi satu langkah. Teknik pertama adalah mematikan satu deklarasi melalui kotak centang pada tab Styles, lalu mengamati apakah tampilan berubah sesuai dugaan. Teknik kedua adalah memberi garis tepi merah sementara pada elemen yang dicurigai untuk memastikan selector benar-benar mengenainya.

css Contoh: garis tepi merah sementara untuk menguji selector 
.kartu-yang-dicurigai {
  outline: 2px solid #dc2626;
}

Garis tepi pada contoh dipilih alih-alih border karena outline tidak memengaruhi tata letak, sehingga tidak menimbulkan pergeseran tambahan. Apabila garis tidak muncul, selector tidak mengenai elemennya dan masalahnya berada pada pencocokan selector, bukan pada nilai deklarasinya. Apabila garis muncul tetapi gaya lainnya tidak berlaku, telusuri aturan mana yang menimpanya melalui tab Styles.

Teknik ketiga adalah menguji selector pada panel Console dengan menjalankan document.querySelector terhadap selector yang dicurigai. Nilai yang dikembalikan menunjukkan elemen pertama yang cocok, sedangkan nilai null berarti selector tidak mengenai apa pun. Penghapusan node pada panel Elements juga berguna untuk menguji kontribusi sebuah elemen terhadap tampilan sekitarnya, dan seluruh percobaan ini hilang dengan sekali memuat ulang halaman.

Penyebab umum#

Penyebab pertama yang paling sering adalah selector yang kalah specificity. Deklarasinya tertulis dengan benar, tetapi aturan lain membawa bobot lebih tinggi, dan tab Styles memperlihatkan kekalahan itu melalui coretan. Perbaikannya bukan menambah !important, melainkan menyesuaikan bobot selector atau mengatur urutan layer.

Penyebab kedua adalah aturan yang ditimpa deklarasi lain di berkas berikutnya. Kasus ini muncul ketika dua aturan menargetkan elemen yang sama dengan bobot yang sama, dan urutan sumber menentukan pemenangnya. Pencarian nama selector pada seluruh proyek menyingkap semua kemunculannya sekaligus.

Penyebab ketiga adalah ejaan properti atau nilai yang keliru, dan browser mengabaikannya tanpa pesan error.

css Contoh: ejaan properti yang keliru diabaikan tanpa pesan 
.kartu {
  background-colour: #ffffff; /* diabaikan browser */
  background-color: #ffffff;
}

Deklarasi dengan nama properti yang tidak dikenal atau nilai yang tidak sah dilewatkan langsung saat penguraian, sehingga gaya tampak hilang tanpa jejak pada panel Styles. Baris yang tidak muncul pada tab Styles berarti tidak pernah diuraikan, dan ejaannya perlu diperiksa terlebih dahulu. Ketiga penyebab ini menjelaskan sebagian besar kasus gaya yang tidak berlaku.

Ringkasan#

  • Tab Styles memperlihatkan seluruh aturan yang berlaku sesuai urutan cascade, dengan coretan pada deklarasi yang kalah.
  • Tab Computed menampilkan nilai akhir hasil cascade dan inheritance, dan butirnya dapat diperluas menuju aturan pemenangnya.
  • Isolasi dilakukan dengan mematikan deklarasi lewat kotak centang, memberi outline merah sementara, dan menguji selector melalui panel Console.
  • Penyebab umum gaya yang tidak berlaku adalah specificity yang kalah, aturan yang ditimpa, dan ejaan properti yang diabaikan browser.

Referensi#