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 melakukan simulasi perangkat seluler. Fitur-fitur ini meliputi:
Batasan
Anggaplah mode perangkat sebagai perkiraan urutan pertama tentang 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 {i>desktop<i} Anda.
Ada beberapa aspek perangkat seluler yang tidak akan dapat disimulasikan DevTools. Misalnya, arsitektur CPU seluler sangat berbeda dari arsitektur laptop atau CPU desktop. Jika ragu, langkah terbaik adalah menjalankan halaman Anda di perangkat seluler. Gunakan Remote Melakukan debug untuk melihat, mengubah, men-debug, dan membuat profil kode halaman dari laptop atau desktop saat sedang 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
di kotak {i>width<i} dan {i>height<i}. 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 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 akan merender halaman sebagai area pandang seluler atau desktop. Ikon kursor mengacu pada jenis
kursor yang Anda lihat ketika
Anda mengarahkan kursor ke laman. Peristiwa diaktifkan mengacu pada apakah halaman diaktifkan atau tidak
Peristiwa touch atau click saat Anda berinteraksi dengan halaman.
| Opsi | Metode rendering | Ikon kursor | Peristiwa diaktifkan |
|---|---|---|---|
| Seluler | Seluler | Lingkaran | sentuh |
| Seluler (tanpa sentuhan) | Seluler | 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 terlipat. Postur berkelanjutan mengacu pada postur "datar" dan terlipat membentuk sudut antara bagian 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 Setelan setelan > Tab Perangkat, pilih perangkat dari daftar perangkat 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 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.
Untuk menyertakan frame perangkat saat mengambil screenshot dalam Mode khusus perangkat, Tampilkan bingkai perangkat terlebih dahulu, lalu klik Ambil screenshot seperti yang diarahkan sebelumnya.
Untuk mempelajari cara lain mengambil screenshot dengan DevTools, lihat 4 cara mengambil screenshot dengan DevTools.
Membatasi jaringan dan CPU
Untuk membatasi jaringan dan CPU, pilih Seluler tingkat tengah atau Seluler kelas bawah dari Daftar pembatasan.
Seluler tingkat tengah menyimulasikan 3G yang cepat dan men-throttle CPU sehingga kecepatannya 4 kali lebih lambat daripada seperti biasanya. Seluler kelas bawah menyimulasikan 3G lambat dan men-throttle CPU 6 kali lebih lambat daripada biasanya. Pertahankan ingat 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 dan bukan jaringan, buka panel Performance, klik Capture
Setelan 
, dan
lalu pilih 4x lebih lambat, 6x lebih lambat, atau 20x lebih lambat dari daftar CPU.
Membatasi jaringan saja
Untuk membatasi jaringan saja dan bukan CPU, buka panel Jaringan lalu pilih 3G Cepat atau 3G lambat dari daftar Throttle.
Atau tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) untuk membuka Command
Menu, ketik 3G, lalu pilih Aktifkan throttling 3G cepat atau Aktifkan throttling 3G lambat.
Anda juga dapat mengatur throttling jaringan dari panel Performa. Klik Setelan Tangkapan
, lalu pilih
3G Cepat atau 3G Lambat dari daftar Jaringan.
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 Alat lainnya > Sensor.
Atau tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) untuk membuka Command
Menu, ketik Sensors, lalu pilih Tampilkan Sensor.
Pilih salah satu preset dari daftar Lokasi, atau pilih Lainnya... untuk memasukkan koordinat 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 Command
Menu, ketik Sensors, lalu pilih Tampilkan Sensor.
Pilih salah satu preset dari daftar Orientasi atau pilih Orientasi kustom untuk menetapkan nilai alfa, beta, dan gamma.
