Angka di panel Computed memberi tahu seberapa besar sebuah kotak, tetapi keluhan layout paling sering berbunyi “kok geser”, “kok numpuk”, atau “kok ada jarak aneh” — pertanyaan yang paling cepat terjawab dengan melihat geometrinya langsung di halaman. DevTools menyediakan overlay visual untuk itu: garis dan label yang digambar di atas halaman, menandai trek grid, sumbu flexbox, lapisan box model, hingga titik penahanan scroll-snap. Chapter ini merangkum cara menyalakan tiap overlay dan apa yang perlu dibaca darinya.

Overlay Grid dan Flexbox #

Setiap elemen dengan display: grid atau display: flex memperoleh badge kecil di panel Elements — tulisan “grid” atau “flex” di sebelah elemennya. Mengklik badge tersebut menyalakan overlay-nya di halaman. Overlay grid memperlihatkan garis trek, nomor baris dan kolom, ukuran setiap trek, serta nama area bila grid memakai named areas ; overlay flexbox menandai item-item fleksibel dan arah sumbu utamanya.

Untuk mengelola banyak overlay sekaligus, buka panel Layout (di tab kanan panel Elements): daftar semua elemen ber-layout di halaman tampil dengan kotak centang overlay masing-masing, plus pengaturan tampilan seperti menampilkan nomor garis atau luas area. Panel ini juga menyimpan preferensi warna overlay bila warna bawaan berbenturan dengan warna halaman.

Pada demo chapter ini, galeri petak memakai grid tiga kolom tetap:

css overlay-grid-flex.html (cuplikan) 
.galeri {
  display: grid;
  grid-template-columns: 160px 160px 160px;
  gap: 16px;
}

Aktifkan overlay grid pada .galeri dan bandingkan dengan nilai computed yang diperiksa harness: tiga trek 160px, jarak antarpetak 16px, dan setiap petak selebar 160px. Label di atas overlay menampilkan ukuran tiap trek secara langsung, sehingga perbedaan antara “lebar yang diminta” dan “lebar yang dihitung” terlihat tanpa membuka panel mana pun. Ketika sebuah petak “lebih besar dari seharusnya”, overlay langsung memperlihatkan apakah pelakunya trek yang membesar atau konten petak yang meluber.

Box Model Overlay #

Diagram box model di bagian atas panel Computed bersifat interaktif: arahkan kursor ke salah satu lapisannya — content, padding, border, atau margin — dan area yang sesuai tersorak dengan warna khusus di halaman, lengkap dengan ukuran tiap sisi pada diagram. Inilah cara tercepat menjawab “jarak ini berasal dari margin, padding, atau border?” tanpa menghitung manual.

Kebiasaan yang membantu: saat mendiagnosis kotak yang meluber, sorot lapisan content dan padding bergantian. Bila area content sudah melebihi kotak induknya, penyebabnya isi yang terlalu lebar; bila content wajar tetapi totalnya meluber, periksa box-sizing dan lapisan padding/border — topik yang telah dibahas tuntas pada Chapter Box Model Debugging .

Overlay Scroll Snap #

Container dengan scroll-snap-type memperoleh overlay tersendiri: titik-titik penahanan (snap points) digambar sebagai garis berlabel pada area gulir. Overlay ini menjawab keluhan klasik “snap-nya menempel di posisi yang aneh” — garis titik penahanan langsung memperlihatkan posisi yang diperhitungkan browser, termasuk efek scroll-padding dan scroll-margin yang menyetel jaraknya. Konsep scroll snap sendiri telah kita pelajari pada Chapter Scroll Snap .

Hasil di Browser:

text 
Galeri grid tersusun atas tiga trek 160px dengan jarak 16px antarpetak;
setiap petak selebar 160px. Strip gulir memakai display: flex dengan
gap 12px dan scroll-snap-type: x mandatory — titik penahannya berada
di pusat tiap kartu (scroll-snap-align: center), dan strip dapat
digulir secara horizontal. Seluruh nilai tersebut diperiksa otomatis
oleh harness.

Dengan geometri terlihat, kasus debugging berikutnya bersifat logis: dua aturan saling menimpa dan kita perlu membuktikan siapa pemenangnya — topik chapter berikutnya.