Gunakan mode perangkat untuk memperkirakan tampilan dan performa halaman di perangkat seluler.
Ringkasan
Mode perangkat adalah nama untuk kumpulan fitur di Chrome DevTools yang membantu Anda menyimulasikan perangkat seluler. Fitur-fitur ini meliputi:
Batasan
Anggaplah mode perangkat sebagai perkiraan urutan pertama untuk tampilan dan nuansa halaman Anda di perangkat seluler. Dengan mode perangkat, Anda sebenarnya tidak menjalankan kode di perangkat seluler. Anda melakukan simulasi pengalaman pengguna seluler dari laptop atau desktop.
Ada beberapa aspek perangkat seluler yang tidak akan dapat disimulasikan DevTools. Misalnya, arsitektur CPU seluler sangat berbeda dengan CPU laptop atau desktop. Jika ragu, langkah terbaik 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 benar-benar berjalan di perangkat seluler.
Buka toolbar perangkat
Untuk membuka toolbar perangkat, ikuti langkah-langkah berikut:
- Buka DevTools.
- Klik perangkat Aktifkan/nonaktifkan toolbar perangkat yang ada pada panel tindakan di bagian atas.
Menyimulasikan area pandang seluler
Secara default, toolbar perangkat terbuka di area pandang dengan Dimensi yang ditetapkan ke Responsive. Dengan menggunakan drop-down Dimensi, Anda dapat menyimulasikan dimensi perangkat seluler tertentu.
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 menyetel lebar dengan klik ke salah satu opsi berikut:
| Seluler S | Seluler M | Seluler L | Tablet | Laptop | Laptop L | 4K |
|---|---|---|---|---|---|---|
| 320px | 375px | 425px | 768px | 1024px | 1440px | 2560px |
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:
- Batang biru dengan titik henti sementara
max-width. - Batang 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 Perlihatkan dalam kode sumber. 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 akan digunakan untuk menggambar piksel CSS. Chrome menggunakan nilai DPR saat menggambar pada layar HiDPI (High Dots Per Inci).
Untuk menetapkan nilai DPR:
Klik Opsi lainnya
> Tambahkan rasio piksel perangkat.
Pada panel tindakan di bagian atas area tampilan, pilih nilai DPR dari menu drop-down DPR baru.
Menentukan jenis perangkat
Gunakan daftar Device Type untuk menyimulasikan perangkat seluler atau perangkat desktop.
Jika Anda tidak dapat melihat daftar pada panel tindakan di bagian atas, pilih Opsi lainnya 
> Tambahkan jenis perangkat.
Tabel berikutnya menjelaskan perbedaan antara opsi-opsi tersebut. Metode rendering mengacu pada apakah Chrome merender halaman sebagai area tampilan seluler atau desktop. Ikon kursor mengacu pada jenis
kursor yang Anda lihat saat mengarahkan kursor ke halaman. Peristiwa yang 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 mengetahui informasi selengkapnya, lihat Menambahkan perangkat seluler kustom.
Putar area pandang ke orientasi lanskap
Klik screen_rotation Putar untuk memutar area tampilan ke orientasi lanskap.
Perhatikan bahwa tombol Rotasi 
akan menghilang jika Toolbar perangkat sempit.
Lihat juga Menyetel 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 dua layar dan satu layar, klik Alihkan mode layar ganda devices_fold di toolbar.
Tetapkan postur perangkat
Beberapa perangkat, misalnya, Asus Zenbook Fold, memiliki layar yang dapat dilipat. Layar tersebut memiliki postur: kontinu atau dilipat. Postur berkelanjutan mengacu pada posisi "datar" dan lipatan membentuk sudut antarbagian layar.
Untuk menyetel postur perangkat, pilih Berkelanjutan atau Terlipat dari menu drop-down yang sesuai pada 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 tampilan.
Dalam contoh ini, DevTools menampilkan frame untuk Nest Hub.
Tambahkan perangkat seluler kustom
Untuk menambahkan perangkat kustom:
Klik daftar Perangkat, lalu pilih Edit.
Di tab Setelan setelan > Perangkat, pilih perangkat dari daftar perangkat yang didukung atau klik Tambahkan perangkat khusus 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 penggaris adalah piksel.
DevTools menampilkan penggaris di bagian atas dan sebelah kiri area pandang.
Klik penggaris pada tanda tertentu untuk menetapkan lebar dan tinggi area pandang.
Zoom area pandang
Gunakan daftar Zoom untuk memperbesar atau memperkecil.
Mengambil screenshot
Untuk mengambil screenshot yang Anda lihat di area pandang, klik 
Opsi lainnya > Ambil screenshot.
Untuk mengambil screenshot keseluruhan halaman termasuk konten yang tidak terlihat di area pandang, pilih Ambil screenshot ukuran penuh dari menu yang sama.
Membatasi jaringan dan CPU
Untuk membatasi jaringan dan CPU, pilih Seluler tingkat tengah atau Seluler kelas bawah dari daftar Throttle.
Perangkat seluler tingkat tengah menyimulasikan 3G yang cepat dan men-throttle CPU sehingga kecepatannya 4 kali lebih lambat dari biasanya. Seluler kelas bawah menyimulasikan 3G lambat dan men-throttle CPU 6 kali lebih lambat daripada biasanya. Perlu diingat bahwa throttling relatif terhadap kemampuan normal laptop atau desktop Anda.
Perhatikan bahwa daftar Throttle akan disembunyikan jika Toolbar perangkat Anda sempit.
Membatasi CPU saja
Untuk men-throttle CPU saja, bukan jaringan, buka panel Performance, klik Capture
Settings 
, lalu
pilih 4x pelambatan, 6x lebih lambat, atau 20x lebih lambat dari daftar CPU.
Membatasi jaringan saja
Untuk membatasi jaringan saja, 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 mengatur throttling jaringan dari panel Performa. Klik Capture Settings
lalu pilih
Fast 3G atau Slow 3G dari daftar Network.
Emulasikan sensor
Gunakan panel Sensors untuk mengganti geolokasi, menyimulasikan orientasi perangkat, memaksa sentuhan, dan mengemulasikan status tidak ada aktivitas.
Bagian selanjutnya memberikan gambaran sekilas tentang cara mengganti geolokasi dan menyetel orientasi perangkat. Untuk mengetahui daftar lengkap fitur, lihat Mengemulasi sensor perangkat.
Ganti 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
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 Sesuaikan dan kontrol DevTools
, lalu pilih Alat lainnya > Sensor.
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.
