Debugging Responsive Layout

Layout yang rapi di monitor kantor sering kali bermasalah tepat di lebar yang paling banyak dipakai pengunjung: 320-an piksel. Chapter Menguji Berbagai Ukuran Layar sudah memperkenalkan device toolbar; chapter ini membawanya ke tingkat kerja — membaca bar media query dan throttling, menjalankan resep mencari pelaku horizontal scroll, dan merapikan semuanya menjadi alur uji empat putaran yang mencakup zoom 200%, navigasi keyboard, dan emulasi reduced motion. Tujuan akhirnya satu: tidak ada lebar layar yang membuat halaman kita berperilaku aneh.

Device Toolbar Lebih Dalam #

Aktifkan device toolbar dengan tombol ikon ponsel di pojok panel DevTools (atau Ctrl+Shift+M). Tampilan Responsive memungkinkan kita menyeret tepi viewport ke lebar mana pun atau mengetik dimensi persis — 320px adalah titik awal yang baik karena lebar terkecil yang masih lazim dipakai. Tiga fitur di sekitarnya layak dihidupkan dari awal:

• Ruler: dari menu titik tiga pada toolbar, aktifkan Show rulers — penggaris di tepi viewport membuat lebar elemen bisa dibandingkan sekilas.
• Bar media query: aktifkan Show media queries; bar di atas viewport menampilkan setiap breakpoint yang ditulis di stylesheet, diberi warna sesuai jenisnya (max-width, rentang, min-width), dan bisa diklik untuk melompat ke lebar tersebut. Bar ini adalah peta responsive design kita: bar yang kosong berarti stylesheet hampir tidak punya breakpoint.
• Throttling: pilihan No throttling membuka preset jaringan lambat dan pelambatan CPU. Dengan Slow 4G plus pelambatan CPU, kita bisa melihat apa yang dialami pengguna jaringan lambat — termasuk layout yang bergeser saat gambar akhirnya termuat.

Perlu diingat, semua ini adalah emulasi: renderer sama, tetapi layar sentuh dan perangkat fisik tetap punya keunikan. Emulasi untuk pekerjaan harian, perangkat sungguhan untuk pemeriksaan akhir.

Resep Mencari Pelaku Horizontal Scroll #

Scrollbar horizontal di 320px adalah temuan paling sering saat audit. Resep menemukan pelakunya butuh satu trik dari chapter Debugging Box Model:

/* Tempel sementara pada rule html di panel Styles */
* {
  outline: 1px solid #ef4444;
}

Langkah lengkapnya:

1. Atur viewport ke 320px dan pastikan scrollbar horizontal muncul.
2. Pasang outline merah pada semua elemen lewat panel Styles (rule di atas) — seluruh kotak halaman tergambar seketika.
3. Cari kotak yang menonjol melewati tepi kanan; klik kanan elemen itu di panel Elements lalu pilih Scroll into view untuk memastikan kita melihat bagian yang tepat.
4. Buka diagram box modelnya: lebar tetap yang tidak menyusut, 100vw, gambar tanpa batas, atau teks panjang tanpa titik patah — salah satunya biasanya langsung terlihat.

Tabel perbaikan mengikuti diagnosis:

Semua pola ini diuraikan lebih lengkap pada chapter Mencegah Horizontal Overflow; di sini kita memakai DevTools untuk menemukan siapa yang harus diperbaiki.

Demo berikut mensimulasikan viewport 320px sebagai wadah bergaris. Di dalamnya ada kartu statistik dan satu token panjang — keduanya diam-diam melampaui lebar:

Perbaikannya dua deklarasi:

.kartu-laba {
  max-width: 100%; /* mengikuti lebar wadah, tidak melampaui */
}
.tanda-token {
  overflow-wrap: anywhere; /* token panjang boleh patah di mana saja */
}

Kondisi inilah yang wajib tercapai di setiap lebar viewport, bukan hanya 320px.

Alur Uji Empat Putaran #

Debugging responsive paling efisien bila dijalankan sebagai rutinitas singkat, bukan pemeriksaan saat sudah terlanjur publik. Empat putaran berikut mencakup lebar, pembesaran, keyboard, dan gerak:

1. Putaran lebar (2 menit). Turunkan viewport ke 320px, jalankan resep outline, pastikan tidak ada scrollbar horizontal dan tidak ada konten terpotong.
2. Putaran zoom (2 menit). Perbesar browser ke 200% — layout harus tetap memenuhi viewport tanpa elemen saling menindih; ini sudut pandang yang sama dengan pengguna penglihatan rendah, sesuai chapter Zoom dan Text Resizing.
3. Putaran keyboard (2 menit). Tekan Tab berulang dari awal halaman: setiap elemen interaktif harus memunculkan indikator fokus yang terlihat di lebar mana pun, sesuai chapter Focus dan Keyboard.
4. Putaran gerak (2 menit). Dari panel Rendering DevTools, aktifkan emulasi prefers-reduced-motion: reduce — animasi dekoratif harus berhenti atau diredam, sesuai chapter Reduced Motion.

Ringkasan #

Device toolbar menjadi alat kerja penuh saat tiga fiturnya ikut menyala: ruler untuk membandingkan lebar, bar media query sebagai peta breakpoint, dan throttling untuk merasakan jaringan lambat. Resep empat langkah — outline semua elemen, cari kotak yang menonjol, Scroll into view, baca diagram box model — menemukan pelaku horizontal scroll dalam hitungan menit, dan tabel perbaikannya menutup kasus dengan cepat. Empat putaran uji (lebar, zoom 200%, keyboard, reduced motion) mengubah semua kebiasaan section ini menjadi rutinitas yang terukur. Chapter berikutnya melangkah dari DevTools ke alat pemeriksa kode: validasi dan linting CSS.