Halaman yang tampil sempurna pada satu ukuran layar belum membuktikan apa pun — responsive design justru teruji ketika lebar viewport berubah. Menunggu laporan pengguna untuk menemukan menu yang terpotong bukan strategi; pengujian viewport adalah bagian dari pekerjaan, dan sebagian besar dapat dilakukan langsung dari browser. Chapter ini merangkum tiga lapis alat uji — device mode di DevTools, mode responsif Firefox, dan alat daring — lalu menutupnya dengan checklist manual yang menuntun apa yang harus diperiksa.

Device Mode di Chrome DevTools #

Device mode menyimulasikan lebar viewport, kepadatan piksel, dan sentuhan tanpa perangkat fisik. Langkahnya:

  1. Buka DevTools dengan F12 atau klik kanan lalu pilih Inspect pada halaman yang sedang diuji.
  2. Aktifkan device toolbar dengan menekan Ctrl+Shift+M (Cmd+Shift+M di macOS) atau klik ikon berbentuk ponsel dan tablet di pojok panel.
  3. Pilih preset perangkat dari dropdown di bagian atas — misalnya ponsel 360px atau tablet 768px — atau ketik dimensi sendiri pada kolom responsif.
  4. Rentangkan viewport dengan drag: tarik dua pegangan di sisi dan sudut area halaman untuk melihat titik ketika layout berpindah state — inilah cara tercepat menemukan breakpoint yang perlu disetel.
  5. Putar orientasi lewat ikon rotasi dan periksa panel media query DevTools yang menampilkan seluruh @media halaman; klik salah satu untuk melompat ke lebar tersebut.

Langkah 4 dan 5 adalah pasangan yang paling produktif: seret perlahan, amati warna dan posisi elemen berpindah, lalu catat lebar yang menghasilkan perpindahan yang tidak diinginkan.

Mode Responsif Firefox dan Alat Daring #

Firefox menyediakan kemampuan setara lewat Responsive Design Mode: buka lewat menu Tools, Browser Tools, lalu Responsive Design Mode, atau tekan Ctrl+Shift+M. Mode ini menampilkan lebar viewport dalam bentuk bilah yang mudah digeser, memuat preset perangkat, dan menyertakan daftar media query halaman yang bisa diklik. Memeriksa halaman di dua browser sekaligus memberi jaminan ekstra karena rendering dan scrollbar dapat berbeda di antara keduanya.

Alat daring melengkapi keduanya: situs pratinjau multi-perangkat menampilkan satu URL dalam beberapa bingkai viewport sekaligus, dan layanan tangkapan layar massal memotret halaman di belasan lebar untuk diperiksa cepat. Kelompok alat ini cocok untuk pemeriksaan visual awal, bukan untuk pengujian interaktif.

Checklist Uji Manual #

Saat menguji di tiap viewport target, jalankan daftar periksa yang sama agar hasilnya konsisten:

  • Navigasi terbuka dan setiap tautan terjangkau, termasuk lewat keyboard.
  • Teks isi terbaca nyaman; tidak ada baris yang terlalu panjang (lebih dari sekitar 75 karakter).
  • Gambar dan media berada di dalam bingkainya; tidak ada gulir horizontal yang tidak disengaja.
  • Target sentuh (tombol, tautan) cukup luas dan tidak saling menempel.
  • Konten penting tidak terpotong di ujung layar, termasuk saat orientasi diputar.
  • Layout tidak bergantung pada :hover untuk informasi inti.

Bila satu item gagal, kembali ke chapter terkait: navigasi pada Chapter Responsive Navigation, media pada Chapter Responsive Images, dan penyesuaian ukuran teks pada Chapter Responsive Typography.

Demo: Tangga yang Siap Diuji #

Demo chapter ini sengaja berisi tangga media query sederhana — dua breakpoints, tiga state — sehingga setiap perpindahan mudah diamati di device mode:

css 
.banner { padding: 12px; background: rgb(254, 226, 226); }      /* state 1 */
@media (min-width: 768px) {
  .banner { padding: 20px; background: rgb(254, 240, 138); }    /* state 2 */
}
@media (min-width: 1200px) {
  .banner { padding: 28px; background: rgb(220, 252, 231); }    /* state 3 */
}

Seret lebar viewport melintasi 768px dan 1200px, lalu pastikan perpindahan terjadi di nilai yang tepat — bukan di sekitarnya.

Hasil di Browser:

text 
Viewport harness 1280x720 — tepat di atas breakpoint 1200px:
- .banner   -> padding 28px, background rgb(220, 252, 231)  (state 3)
- .tanda    -> color rgb(21, 128, 61)
- .ladder-2 -> border-left-color rgb(22, 163, 74)  (hijau, state ketiga)
Pada viewport 768-1199px ketiganya pindah ke state 2 (kuning, biru),
dan di bawah 768px kembali ke state 1 (merah muda, abu-abu).

Dengan checklist dan alat uji ini, seluruh rangkaian responsive design pada section ini telah lengkap: dari prinsip, mobile first, media queries, hingga pembuktian lewat pengujian. Langkah lanjutan yang disarankan adalah proyek landing page responsif di akhir Course, tempat semua pola ini dipakai bersama.