Menguji Tampilan yang Terlihat dalam Mode Responsif dan Perangkat Tertentu

Device Mode yang diperbarui (sejak Chrome 49) adalah bagian integral dari DevTools yang sekarang mengutamakan tampilan seluler dan memperluas bilah DevTools utama. Pelajari cara menggunakan kontrolnya untuk menyimulasikan beraneka ragam perangkat atau menguji secara responsif sepenuhnya.

TL;DR

  • Menguji daya respons situs menggunakan emulator layar Device Mode.
  • Menyimpan preset khusus agar mudah diakses di lain waktu.
  • Device Mode tidak bisa menggantikan pengujian pada perangkat sebenarnya. Ketahui keterbatasannya.

Menggunakan kontrol tampilan yang terlihat

mode perangkat diaktifkan

Kontrol Tampilan yang Terlihat digunakan untuk menguji situs pada beragam perangkat, serta secara responsif sepenuhnya. Ada dua mode kontrol:

  1. Responsive. Membuat Tampilan yang Terlihat bisa disesuaikan ukurannya secara bebas melalui tuas di sisi mana pun.
  2. Perangkat Tertentu. Mengunci Tampilan yang Terlihat ke ukuran tampilan perangkat tertentu secara persis dan mengemulasikan karakteristik perangkat tersebut.

Responsive Mode

Kami merekomendasikan menggunakan Responsive Mode sebagai mode kerja default. Gunakan selama tahap development aktif situs dan aplikasi. Sering-seringlah mengubah ukuran tampilan yang terlihat untuk menciptakan desain responsif yang dapat menyesuaikan diri dengan jenis perangkat, bahkan perangkat yang tidak diketahui atau perangkat baru di masa mendatang.

Untuk memaksimalkan pemanfaatan Responsive Mode, aktifkan Bilah Kueri Media.

Menyesuaikan ukuran tampilan yang terlihat

Seret tuas pengubah ukuran yang besar pada tampilan yang terlihat atau klik nilai di bilah menu untuk menetapkan ukuran secara tepat.

Mode perangkat tertentu

Gunakan Mode Perangkat Tertentu saat Anda mendekati akhir fase development aktif dan ingin menyempurnakan tampilan situs di layar perangkat seluler tertentu (mis. iPhone atau Nexus tertentu)

Preset perangkat bawaan

Kami menyertakan perangkat paling populer saat ini di menu tarik-turun perangkat. Setelah memilih perangkat, setiap preset otomatis mengonfigurasi emulasi karakteristik perangkat tertentu:

  • Menyetel string "User Agent" (UA) yang benar.
  • Menyetel resolusi dan DPI perangkat (rasio piksel perangkat).
  • Mengemulasikan kejadian sentuh (jika tersedia).
  • Mengemulasikan overlay bilah gulir seluler dan meta viewport.
  • Otomatis mengubah ukuran (memperbesar) teks untuk laman yang tidak mendefinisikan tampilan yang terlihat.
pilih perangkat

Menambahkan preset perangkat khusus

Device Mode menawarkan berbagai jenis perangkat untuk emulasi. Anda bisa menambahkan perangkat khusus jika Anda menemukan kasus ekstrem atau perangkat sangat khusus yang tidak tercakup.

Untuk menambahkan perangkat khusus:

  1. Masuk ke Setelan DevTools.
  2. Klik tab Devices.
  3. Klik Add custom device.
  4. Masukkan nama perangkat, lebar, tinggi, rasio piksel perangkat, dan string agen-pengguna.
  5. Klik Add.

Perangkat khusus baru ini sekarang tersedia di menu tarik-turun Device.

pilih perangkat

Keadaan dan orientasi perangkat

beralih orientasi

Saat mengemulasikan perangkat khusus, bilah alat Device Mode menampilkan kontrol tambahan yang utamanya berfungsi mengalihkan orientasi antara lanskap dan potret.

Di perangkat yang didukung, kontrol tidak hanya mengalihkan orientasi. Untuk perangkat yang didukung seperti Nexus 5X, terdapat menu tarik-turun untuk mengemulasikan keadaan perangkat tertentu, seperti:

  • UI browser default
  • Dengan bilah navigasi Chrome
  • Dengan keyboard terbuka
Mengubah UI Perangkat

Zoom to fit

Terkadang, Anda ingin menguji perangkat yang resolusinya lebih besar dari ruang yang tersedia di jendela browser. Dalam kasus seperti ini, opsi Zoom to Fit sangat berguna:

  1. Fit to Window akan otomatis menyetel level pembesaran ke ruang maksimum yang tersedia.
  2. Explicit percentages berguna bila Anda ingin menguji DPI pada gambar, misalnya.
Zoom to Fit

Kontrol opsional (mis. sentuh, kueri media, DPR)

Kontrol opsional bisa diubah atau diaktifkan dengan mengeklik tiga titik kecil di sebelah kanan bilah alat perangkat. Opsi saat ini meliputi

  • Tipe agen-pengguna (mengemulasikan UA dan kejadian sentuh)
  • Rasio piksel perangkat
  • Kueri Media
  • Penggaris
  • Konfigurasi Jaringan (UA, throttling jaringan)
Setelan Device Mode

Lanjutkan baca untuk mengetahui selengkapnya tentang setiap opsi.

Tipe agen-pengguna

Setelan User Agent Type atau Device Type digunakan untuk mengubah jenis perangkat. Kemungkinan nilainya:

  1. Mobile
  2. Desktop
  3. Desktop with touch

Mengubah setelan ini akan memengaruhi tampilan yang terlihat di perangkat seluler dan emulasi kejadian sentuh serta mengubah string UA. Jadi, jika Anda ingin membuat situs responsif untuk Desktop dan ingin menguji efek pengarahan kursor ke atas objek, ubah ke "Desktop" di Responsive Mode.

Tip: Anda juga bisa menyetel agen-pengguna di panel samping Network conditions .

Rasio piksel perangkat (DPR)

Jika Anda ingin mengemulasikan perangkat Retina dari mesin non-Retina atau sebaliknya, sesuaikan Device pixel ratio. Rasio piksel perangkat (DPR) adalah rasio antara piksel logis dan piksel fisik. Perangkat dengan layar Retina, misalnya Nexus 6P, memiliki kepadatan piksel lebih tinggi dibandingkan perangkat biasa, yang bisa memengaruhi ketajaman dan ukuran materi visual.

Berikut beberapa contoh sensitivitas "Rasio Piksel Perangkat" (DPR) di web:

  • Kueri media CSS, seperti:

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

  • Aturan image-set CSS.

  • Atribut srcset pada gambar.

  • Properti window.devicePixelRatio.

Jika Anda memiliki layar Retina bawaan, Anda akan melihat aset dengan "Titik Per Inci" (DPI) yang rendah akan tampak mengalami pikselisasi sedangkan aset ber-DPI tinggi tampak tajam. Untuk menyimulasikan efek ini pada layar standar, tetapkan DPR ke 2 dan skalakan tampilan yang terlihat dengan pembesaran. Aset 2x akan tetap tampak tajam, sedangkan aset 1x akan tampak mengalami pikselisasi.

Kueri media

Kueri media adalah bagian penting dari desain web responsif. Untuk menampilkan pemeriksa kueri media, klik Show Media queries di menu tiga titik. DevTools mendeteksi kueri media di stylesheet dan menampilkannya sebagai bilah berwarna di penggaris atas.

show media queries

pemeriksa kueri media

Kueri media diberi kode warna sebagai berikut:

Kueri yang menargetkan lebar maksimum.
Kueri yang menargetkan lebar dalam rentang tertentu.
Kueri yang menargetkan lebar minimum.

Melihat pratinjau kueri media dengan cepat

Klik bilah kueri media untuk menyesuaikan ukuran tampilan yang terlihat dan menampilkan pratinjau gaya untuk ukuran layar yang ditargetkan.

Menampilkan CSS yang terkait

Klik kanan bilah untuk melihat tempat kueri media didefinisikan di CSS dan masuk ke definisinya di kode sumber.

tampilan kueri media dasar-dasar web

Penggaris

Alihkan opsi ini untuk menampilkan penggaris berbasis piksel di sebelah tampilan yang terlihat.

Konfigurasi jaringan (UA, throttling jaringan)

Memilih opsi ini akan membuka panel di Panel Samping untuk mengubah perilaku yang terkait dengan jaringan:

  1. Disk Cache: Menonaktifkan Disk Cache menghentikan laman dan asetnya agar tidak di-cache oleh browser saat DevTools terbuka.
  2. Throttling Jaringan: Baca selengkapnya tentang Throttling Jaringan di sini.
  3. User Agent: Untuk menyetel penggantian string UA (User Agent) tertentu.

Tip: Anda juga bisa membuka panel samping Network conditions dari menu utama.

Batasan

Device Mode memiliki beberapa keterbatasan.

  • Perangkat keras perangkat
  • Perilaku GPU dan CPU tidak diemulasikan.
  • UI Browser
  • Tampilan sistem, seperti bilah alamat, tidak diemulasikan.
  • Tampilan bawaan, seperti elemen <select> tidak diemulasikan sebagai daftar modal.
  • Beberapa peningkatan, seperti masukan angka yang membuka keypad, bisa berbeda dari perilaku perangkat sebenarnya.
  • Fungsionalitas browser
  • WebGL beroperasi di emulator, tetapi tidak didukung di perangkat iOS 7.
  • MathML tidak didukung di Chrome, tetapi didukung di perangkat iOS 7.
  • Bug pembesaran orientasi iOS 5 tidak diemulasikan.
  • Properti CSS line-height beroperasi di emulator, tetapi tidak didukung di Opera Mini.
  • Batas aturan CSS, seperti yang ada di Internet Explorer, tidak diemulasikan.
  • AppCache
  • Emulator tidak mengganti UA untuk file manifes atau permintaan lihat sumber dari AppCache.

Terlepas dari keterbatasan ini, Device Mode cukup andal untuk sebagian besar tugas. Bila Anda ingin menguji pada perangkat sesungguhnya, Anda bisa menggunakan Debug Dari Jauh untuk memperoleh wawasan tambahan.