Gunakan mode perangkat untuk memperkirakan tampilan dan performa halaman Anda di perangkat seluler.
Mode perangkat adalah nama untuk sekumpulan fitur di Chrome DevTools yang membantu Anda menyimulasikan perangkat seluler. Fitur-fitur ini meliputi:
Batasan
Bayangkan mode perangkat sebagai perkiraan urutan pertama dari tampilan dan nuansa halaman Anda di perangkat seluler. Dengan mode perangkat, Anda sebenarnya tidak menjalankan kode di perangkat seluler. Anda menyimulasikan pengalaman pengguna seluler dari laptop atau desktop.
Ada beberapa aspek perangkat seluler yang tidak bisa disimulasikan DevTools. Misalnya, arsitektur CPU seluler sangat berbeda dengan laptop atau CPU desktop. Jika ragu, langkah terbaik Anda adalah menjalankan halaman Anda di perangkat seluler. Gunakan Proses Debug Jarak Jauh untuk melihat, mengubah, men-debug, dan membuat profil kode halaman dari laptop atau desktop saat sedang berjalan di perangkat seluler.
Menyimulasikan area pandang seluler
Klik perangkat Aktifkan/nonaktifkan toolbar perangkat untuk membuka toolbar yang memungkinkan Anda menyimulasikan area pandang seluler.
Secara default, toolbar perangkat terbuka di area pandang dengan Dimensi ditetapkan ke Responsive.
Mode Area Pandang Responsif
Tarik tuas untuk mengubah ukuran area pandang ke dimensi apa pun yang Anda perlukan. Atau, masukkan nilai tertentu
dalam kotak lebar dan tinggi. Dalam contoh ini, lebar disetel ke 480
dan tinggi disetel ke
415
.
Atau, gunakan panel preset lebar untuk menetapkan lebar dengan klik ke salah satu opsi berikut:
Seluler S | Seluler M | Ponsel L | Tablet | Laptop | Laptop L | 4K |
---|---|---|---|---|---|---|
320px | 375px | 425px | 768px | 1024px | 1440px | 2.560 px |
Tampilkan kueri media
Untuk menampilkan titik henti sementara kueri media di atas area pandang, klik Opsi lainnya > Tampilkan kueri media.
DevTools kini menampilkan dua batang tambahan di atas area pandang:
- Panel biru dengan titik henti sementara
max-width
. - Bilah oranye dengan titik henti sementara
min-width
.
Klik di antara titik henti sementara untuk mengubah lebar area pandang sehingga titik henti sementara dipicu.
Untuk menemukan deklarasi @media
yang sesuai, klik kanan di antara titik henti sementara, lalu pilih Reveal in source code. DevTools membuka panel Sources pada baris yang sesuai di Editor.
Menetapkan rasio piksel perangkat
Rasio piksel perangkat (DPR) adalah rasio antara piksel fisik pada layar hardware dan piksel logis (CSS). Dengan kata lain, DPR memberi tahu Chrome berapa banyak piksel layar yang digunakan untuk menggambar piksel CSS. Chrome menggunakan nilai DPR saat menggambar di layar HiDPI (High Dots Per Inci).
Untuk menetapkan nilai DPR:
Klik Opsi lainnya > Tambahkan rasio piksel perangkat.
Pada panel tindakan di bagian atas area pandang, pilih nilai DPR dari menu drop-down DPR yang baru.
Menentukan jenis perangkat
Gunakan daftar Device Type untuk menyimulasikan perangkat seluler atau perangkat desktop.
Jika Anda tidak dapat melihat daftarnya di panel tindakan di bagian atas, pilih Opsi lainnya > Tambahkan jenis perangkat.
Tabel berikutnya menjelaskan perbedaan di antara opsi-opsi tersebut. Metode rendering mengacu pada apakah Chrome merender halaman sebagai area pandang seluler atau desktop. Ikon kursor adalah jenis
kursor yang Anda lihat saat mengarahkan kursor ke atas halaman. Peristiwa diaktifkan mengacu pada apakah halaman mengaktifkan peristiwa touch
atau click
saat Anda berinteraksi dengan halaman.
Opsi | Metode rendering | Ikon kursor | Peristiwa diaktifkan |
---|---|---|---|
Ponsel | Ponsel | Lingkaran | sentuh |
Seluler (tanpa sentuhan) | Ponsel | Normal | click |
Desktop | Desktop | Normal | click |
Desktop (sentuh) | Desktop | Lingkaran | sentuh |
Mode khusus perangkat
Untuk menyimulasikan dimensi perangkat seluler tertentu, pilih perangkat dari daftar Dimensi.
Untuk informasi selengkapnya, lihat Menambahkan perangkat seluler kustom.
Putar area pandang ke orientasi lanskap
Klik screen_rotation Putar untuk memutar area pandang ke orientasi lanskap.
Perhatikan bahwa tombol Rotate akan hilang jika toolbar Perangkat sempit.
Lihat juga Setel orientasi.
Beralih ke mode layar ganda
Beberapa perangkat, misalnya, Surface Duo, memiliki dua layar dan dua cara untuk menggunakannya: dengan salah satu atau kedua layar aktif.
Untuk beralih antara layar ganda dan tunggal, klik devices_fold Aktifkan/nonaktifkan mode layar ganda di toolbar.
Menetapkan postur perangkat
Beberapa perangkat, misalnya, Asus Zenbook Fold, memiliki layar perangkat foldable. Layar tersebut memiliki postur: kontinu atau terlipat. Postur kontinu mengacu pada posisi "datar" dan saat dilipat membentuk sudut di antara bagian-bagian layar.
Untuk menetapkan postur perangkat, pilih Berkelanjutan atau Terlipat dari menu drop-down yang sesuai di toolbar.
Tampilkan frame perangkat
Saat menyimulasikan dimensi perangkat seluler tertentu seperti Nest Hub, pilih Opsi lainnya > Tampilkan bingkai perangkat untuk menampilkan bingkai perangkat fisik di sekitar area pandang.
Dalam contoh ini, DevTools menampilkan bingkai untuk Nest Hub.
Tambahkan perangkat seluler khusus
Untuk menambahkan perangkat kustom:
Klik daftar Perangkat, lalu pilih Edit.
Di tab Setelan > Perangkat, pilih perangkat dari daftar yang didukung atau klik Tambahkan perangkat kustom untuk menambahkan perangkat Anda sendiri.
Jika Anda menambahkan milik Anda sendiri, masukkan nama, lebar, dan tinggi untuk perangkat, lalu klik Tambahkan.
Kolom rasio piksel perangkat, string agen pengguna, dan jenis perangkat bersifat opsional. Kolom jenis perangkat adalah daftar yang ditetapkan ke Seluler secara default.
Kembali ke area pandang, pilih perangkat yang baru ditambahkan dari daftar Dimensi.
Tampilkan penggaris
Klik Opsi lainnya > Tampilkan penggaris untuk melihat penggaris. Satuan ukuran dari penggaris adalah piksel.
DevTools menampilkan penggaris di bagian atas dan di sebelah kiri area pandang.
Klik penggaris pada tanda tertentu untuk menyetel lebar dan tinggi area pandang.
Memperbesar area pandang
Gunakan daftar Zoom untuk memperbesar atau memperkecil.
Mengambil screenshot
Untuk mengambil screenshot dari hal yang Anda lihat di area pandang, klik Opsi lainnya > Ambil screenshot.
Untuk mengambil screenshot seluruh halaman termasuk konten yang tidak terlihat di area pandang, pilih Ambil screenshot ukuran penuh dari menu yang sama.
Batasi jaringan dan CPU
Untuk membatasi jaringan dan CPU, pilih Seluler tingkat tengah atau Seluler kelas bawah dari daftar Pembatasan.
Seluler tingkat tengah menyimulasikan 3G cepat dan membatasi CPU sehingga 4 kali lebih lambat daripada biasanya. Seluler kelas bawah menyimulasikan 3G lambat dan membatasi CPU 6 kali lebih lambat dari biasanya. Perlu diingat bahwa throttling tersebut relatif terhadap kemampuan normal laptop atau desktop Anda.
Perhatikan bahwa daftar Pembatasan akan disembunyikan jika Toolbar perangkat terlalu sempit.
Batasi CPU saja
Untuk membatasi CPU saja dan bukan jaringan, buka panel Performance, klik Capture Settings , lalu pilih 4x pelambatan atau 6x pelambatan dari daftar CPU.
Batasi jaringan saja
Untuk membatasi jaringan saja dan bukan CPU, buka panel Jaringan, lalu pilih 3G Cepat atau 3G Lambat dari daftar Pembatasan.
Atau tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) untuk membuka Menu
Command, ketik 3G
, lalu pilih Aktifkan throttling 3G cepat atau Aktifkan throttling 3G lambat.
Anda juga dapat menetapkan throttling jaringan dari panel Performance. Klik Setelan Tangkapan , lalu pilih 3G Cepat atau 3G Lambat dari daftar Jaringan.
Emulasi sensor
Gunakan tab Sensors untuk mengganti geolokasi, menyimulasikan orientasi perangkat, memaksa sentuhan, dan mengemulasi status tidak ada aktivitas.
Bagian selanjutnya memberikan tampilan singkat tentang cara mengganti geolokasi dan menyetel orientasi perangkat. Untuk mengetahui daftar lengkap fitur, lihat Mengemulasi sensor perangkat.
Ganti geolokasi
Untuk membuka UI pengganti geolokasi, klik Customize and control DevTools , lalu pilih More tools > Sensors.
Atau, tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) untuk membuka Menu
Command, ketik Sensors
, lalu pilih Show Sensors.
Pilih salah satu preset dari daftar Lokasi, atau pilih Lainnya... untuk memasukkan koordinat Anda sendiri, atau pilih Lokasi tidak tersedia untuk menguji perilaku halaman Anda saat geolokasi dalam status error.
Setel orientasi
Untuk membuka UI orientasi, klik Customize and control DevTools , lalu pilih More tools > Sensors.
Atau, tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) untuk membuka Menu
Command, ketik Sensors
, lalu pilih Show Sensors.
Pilih salah satu preset dari daftar Orientasi atau pilih Orientasi kustom untuk menetapkan nilai alfa, beta, dan gamma Anda sendiri.