Tips DevTools: Cara memeriksa petak CSS

Sofia Emelianova
Sofia Emelianova

Chrome DevTools membuat proses debug tata letak petak CSS menjadi intuitif dengan berbagai opsi visualisasi.

Tonton video untuk mempelajari cara mengalihkan overlay petak di panel Elemen dan menggunakannya untuk:

Overlay petak.

  • Visualisasi dan periksa tata letak petak.
  • Lihat nomor baris dan kolom yang akan dirujuk saat menempatkan item petak.
  • Gunakan nama garis dan area serta lihat di overlay jika Anda memiliki banyak item petak dan jumlahnya membingungkan.
  • Periksa ukuran trek.

Selain itu, dengan Editor Petak di panel Elemen > Gaya, Anda dapat meratakan item dan kontennya dalam tata letak petak dengan mengklik tombol, tanpa perlu mengetik aturan CSS.

Editor Petak.

Untuk mendapatkan pengalaman pembelajaran yang lebih langsung, ikuti tutorial Memeriksa Petak CSS.