Tips DevTools: Menemukan masalah CSS

Sofia Emelianova
Sofia Emelianova

Pernahkah Anda menerapkan CSS ke elemen, tetapi tidak berfungsi?

Dengan Chrome DevTools, Anda dapat menemukan masalah CSS secara sekilas, men-debug, dan mengujinya.

Tonton video untuk mempelajari cara panel Elemen > Gaya menyoroti berbagai masalah CSS:

  • Peringatan. Properti dengan sintaksis tidak valid

  • Kotak centang. Properti yang diganti

  • Kotak centang. Properti tidak aktif Informasi.Dengan petunjuk.

  • Diwariskan dari parent

    • Kotak centang. Properti yang diwarisi
    • Kotak centang. Properti yang tidak diwarisi
  • Kotak centang. Properti singkatan yang dapat diperluas Luaskan.

    • Kotak centang. Properti panjang yang diganti
    • Kotak centang. Properti panjang aktif

stylesheet agen pengguna

  • Properti yang tidak dapat diedit
  • Properti yang tidak dapat diedit dan diganti

Tips proses debug lainnya:

  • Gunakan filter di panel Gaya untuk berfokus pada satu properti yang Anda minati.
  • Gunakan panel Dihitung untuk melihat semua pemenang Cascade dan nilai yang dihitung.
  • Di panel Computed, luaskan properti dan klik link untuk menemukan sumbernya di panel Styles.

Untuk mempelajari lebih lanjut semua cara DevTools menandai masalah CSS, lihat Menemukan CSS yang tidak valid, ditimpa, tidak aktif, dan lainnya.

Untuk meningkatkan keahlian CSS Anda, lihat Mempelajari CSS.

Untuk mempelajari cara membuat situs yang terlihat bagus dan berfungsi dengan baik untuk semua orang, lihat Pelajari Desain Responsif.