Menyimulasikan perangkat seluler dengan mode perangkat

Kayce Basques

Sofia Emelianova

Gunakan mode perangkat untuk memperkirakan tampilan dan performa halaman Anda di perangkat seluler.

Ringkasan

Mode perangkat adalah nama untuk kumpulan fitur di Chrome DevTools yang membantu Anda menyimulasikan perangkat seluler. Fitur-fitur ini meliputi:

• Menyimulasikan area pandang seluler
• Mengaktifkan throttling CPU
• Mengaktifkan throttling jaringan
  Poin penting: Atau, Anda dapat mengaktifkan throttling kecepatan koneksi di panel Network.
• Selain itu, di panel Sensors:
  • Menyimulasikan geolokasi
  • Menetapkan orientasi

Batasan

Anggap mode perangkat sebagai perkiraan tingkat pertama tentang tampilan halaman Anda dan nuansa 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 akan pernah dapat disimulasikan oleh DevTools. Misalnya, arsitektur CPU seluler sangat berbeda dengan arsitektur CPU laptop atau desktop. Jika ragu, sebaiknya jalankan 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 kode tersebut benar-benar berjalan di perangkat seluler.

Membuka toolbar perangkat

Untuk membuka toolbar perangkat, ikuti langkah-langkah berikut:

1. Buka DevTools.
2. Klik perangkat Toggle device toolbar yang terletak di panel tindakan di bagian atas.

Menyimulasikan area pandang seluler

Secara default, toolbar perangkat terbuka di area pandang dengan Dimensions yang ditetapkan ke Responsive. Dengan menu drop-down Dimensions, Anda dapat menyimulasikan dimensi perangkat seluler tertentu.

Mode Area Pandang Responsif

Tarik tuas untuk mengubah ukuran area pandang ke dimensi apa pun yang Anda butuhkan. Atau, masukkan nilai tertentu di kotak lebar dan tinggi. Dalam contoh ini, lebar ditetapkan ke 480 dan tinggi ditetapkan ke 415.

Atau, gunakan panel preset lebar untuk menetapkan lebar dengan mengklik salah satu opsi berikut:

Seluler S	Seluler M	Seluler L	Tablet	Laptop	Laptop L	4K
320 piksel	375 piksel	425 piksel	768 piksel	1024 piksel	1440 piksel	2560 piksel

Menampilkan kueri media

Untuk menampilkan breakpoint kueri media di atas area pandang, klik More options > Show media queries.

DevTools kini menampilkan dua panel tambahan di atas area pandang:

• Panel biru dengan max-width breakpoint.
• Panel oranye dengan min-width breakpoint.

Klik di antara breakpoint untuk mengubah lebar area pandang sehingga breakpoint akan dipicu.

Untuk menemukan deklarasi @media yang sesuai, klik kanan di antara breakpoint dan pilih Reveal in source code. DevTools akan membuka panel Sources di baris yang sesuai di Editor.

Menetapkan rasio piksel perangkat

Rasio piksel perangkat (DPR) adalah rasio antara piksel fisik di layar hardware dan piksel logis (CSS). Dengan kata lain, DPR memberi tahu Chrome berapa banyak piksel layar yang akan digunakan untuk menggambar piksel CSS. Chrome menggunakan nilai DPR saat menggambar di layar HiDPI (High Dots Per Inch).

Untuk menetapkan nilai DPR:

1. Klik More options > Add device pixel ratio.

   

2. Di panel tindakan di bagian atas area pandang, pilih nilai DPR dari menu drop-down DPR baru.

   

Menetapkan jenis perangkat

Gunakan daftar Device Type untuk menyimulasikan perangkat seluler atau perangkat desktop.

Jika Anda tidak dapat melihat daftar di panel tindakan di bagian atas, pilih Opsi lainnya > Tambahkan jenis perangkat.

Tabel berikutnya menjelaskan perbedaan antara opsi. Rendering method mengacu pada apakah Chrome merender halaman sebagai area pandang seluler atau desktop. Cursor icon mengacu pada jenis kursor yang Anda lihat saat mengarahkan kursor ke halaman. Events fired mengacu pada apakah halaman memicu peristiwa touch atau click saat Anda berinteraksi dengan halaman.

Opsi	Metode rendering	Ikon kursor	Peristiwa yang dipicu
Seluler	Seluler	Lingkaran	sentuh
Seluler (tanpa sentuhan)	Seluler	Normal	klik
Desktop	Desktop	Normal	klik
Desktop (sentuhan)	Desktop	Lingkaran	sentuh

Mode khusus perangkat

Untuk menyimulasikan dimensi perangkat seluler tertentu, pilih perangkat dari daftar Dimensions.

Untuk mengetahui informasi selengkapnya, lihat Menambahkan perangkat seluler kustom.

Memutar area pandang ke orientasi lanskap

Klik screen_rotation Rotate untuk memutar area pandang ke orientasi lanskap.

Perhatikan bahwa tombol Rotate akan menghilang jika Device toolbar Anda sempit.

Lihat juga Menetapkan orientasi.

Mengalihkan mode layar ganda

Beberapa perangkat, misalnya Surface Duo, memiliki dua layar dan dua cara untuk menggunakannya: dengan satu atau kedua layar aktif.

Untuk beralih antara layar ganda dan layar tunggal, klik devices_fold Toggle dual-screen mode di toolbar.

Menetapkan postur perangkat

Beberapa perangkat, misalnya Asus Zenbook Fold, memiliki layar foldable. Layar tersebut memiliki postur: berkelanjutan atau dilipat. Postur berkelanjutan mengacu pada posisi "datar" dan dilipat membentuk sudut antara bagian layar.

Untuk menetapkan postur perangkat, pilih Continuous atau Folded dari menu drop-down yang sesuai di toolbar.

Menampilkan frame perangkat

Saat menyimulasikan dimensi perangkat seluler tertentu seperti Nest Hub, pilih More options > Show device frame untuk menampilkan frame perangkat fisik di sekitar area pandang.

Catatan: Jika Anda tidak melihat frame perangkat untuk perangkat tertentu, kemungkinan DevTools tidak memiliki gambar untuk opsi tertentu tersebut.

Dalam contoh ini, DevTools menampilkan frame untuk Nest Hub.

Menambahkan perangkat seluler kustom

Untuk menambahkan perangkat kustom:

1. Klik daftar Device , lalu pilih Edit.

   

2. Di tab Settings settings > Devices, pilih perangkat dari daftar perangkat yang didukung atau klik Add custom device untuk menambahkan perangkat Anda sendiri.

3. Jika Anda menambahkan perangkat sendiri, masukkan nama, lebar, dan tinggi untuk perangkat, lalu klik Add.

   

   Kolom rasio piksel perangkat, string agen pengguna, dan jenis perangkat bersifat opsional. Kolom jenis perangkat adalah daftar yang ditetapkan ke Mobile secara default.

4. Kembali di area pandang, pilih perangkat yang baru ditambahkan dari daftar Dimensions.

Menampilkan penggaris

Klik More options > Show rulers untuk melihat penggaris. Unit ukuran penggaris adalah piksel.

DevTools menampilkan penggaris di bagian atas dan di sebelah kiri area pandang.

Klik penggaris pada tanda tertentu untuk menetapkan lebar dan tinggi area pandang.

Memperbesar area pandang

Gunakan daftar Zoom untuk memperbesar atau memperkecil.

Mengambil screenshot

Untuk mengambil screenshot dari apa 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 Capture a full size screenshot dari menu yang sama.

Untuk menyertakan frame perangkat saat mengambil screenshot dalam mode Khusus perangkat, pertama-tama Tampilkan frame perangkat, lalu klik Capture screenshot seperti yang diarahkan sebelumnya.

Untuk mempelajari cara lain mengambil screenshot dengan DevTools, lihat 4 cara mengambil screenshot dengan DevTools.

Mengaktifkan throttling jaringan dan CPU

Untuk mengaktifkan throttling jaringan dan CPU, pilih Mid-tier mobile atau Low-end mobile dari daftar Throttle.

Mid-tier mobile menyimulasikan 3G cepat dan mengaktifkan throttling CPU sehingga 4 kali lebih lambat dari normal. Low-end mobile menyimulasikan 3G lambat dan mengaktifkan throttling CPU 6 kali lebih lambat dari normal. Perlu diingat bahwa throttling bersifat relatif terhadap kemampuan normal laptop atau desktop Anda.

Perhatikan bahwa daftar Throttle akan disembunyikan jika Device toolbar Anda sempit.

Mengaktifkan throttling CPU saja

Untuk mengaktifkan throttling CPU saja dan bukan jaringan, buka panel Performance, klik Capture Settings , lalu pilih 4x slowdown, 6x slowdown, atau 20x slowdown dari daftar CPU.

Mengaktifkan throttling jaringan saja

Untuk mengaktifkan throttling jaringan saja dan bukan CPU, buka panel Network dan pilih Fast 3G atau Slow 3G dari daftar Throttle.

Atau, tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) untuk membuka Menu Perintah, ketik 3G, lalu pilih Enable fast 3G throttling atau Enable slow 3G throttling.

Anda juga dapat menetapkan throttling jaringan dari panel Performance. Klik Capture Settings , lalu pilih Fast 3G atau Slow 3G dari daftar Network.

Mengemulasi sensor

Gunakan panel Sensors untuk mengganti geolokasi, menyimulasikan orientasi perangkat, memaksa sentuhan, dan mengemulasi status tidak ada aktivitas.

Bagian berikutnya memberikan gambaran singkat tentang cara mengganti geolokasi dan menetapkan orientasi perangkat. Untuk mengetahui daftar lengkap fitur, lihat Mengemulasi sensor perangkat.

Mengganti geolokasi

Untuk membuka UI penggantian 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 Perintah, ketik Sensors, lalu pilih Show Sensors.

Pilih salah satu preset dari daftar Location, atau pilih Other... untuk memasukkan koordinat Anda sendiri, atau pilih Location unavailable untuk menguji perilaku halaman Anda saat geolokasi dalam status error.

Menetapkan 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 Perintah, ketik Sensors, lalu pilih Show Sensors.

Pilih salah satu preset dari daftar Orientation atau pilih Custom orientation untuk menetapkan nilai alfa, beta, dan gamma Anda sendiri.