Menyimulasikan perangkat seluler dengan mode perangkat

Sofia Emelianova
Sofia Emelianova

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.

Toolbar perangkat.

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.

Pengendali untuk mengubah dimensi area pandang saat dalam Mode Area Pandang Responsif.

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

Panel preset lebar.

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. Opsi lainnya > Tampilkan kueri media.

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.

Klik di antara titik henti sementara untuk mengubah lebar area pandang.

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.

Buka di menu drop-down kode sumber.

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:

  1. Klik Opsi lainnya Opsi lainnya. > Tambahkan rasio piksel perangkat.

    Tambahkan rasio piksel perangkat.

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

    Menetapkan nilai DPR.

Menentukan jenis perangkat

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

Daftar Jenis Perangkat.

Jika Anda tidak dapat melihat daftarnya di panel tindakan di bagian atas, pilih Opsi lainnya 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.

OpsiMetode renderingIkon kursorPeristiwa diaktifkan
PonselPonselLingkaransentuh
Seluler (tanpa sentuhan)PonselNormalclick
DesktopDesktopNormalclick
Desktop (sentuh)DesktopLingkaransentuh

Mode khusus perangkat

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

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.

Orientasi lanskap.

Perhatikan bahwa tombol Rotate Rotasikan. akan hilang jika toolbar Perangkat sempit.

Toolbar perangkat.

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.

Mode layar ganda diaktifkan.

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.

Postur disetel ke terlipat.

Tampilkan frame perangkat

Saat menyimulasikan dimensi perangkat seluler tertentu seperti Nest Hub, pilih Opsi lainnya Opsi lainnya. > Tampilkan bingkai perangkat untuk menampilkan bingkai perangkat fisik di sekitar area pandang.

Tampilkan frame perangkat.

Dalam contoh ini, DevTools menampilkan bingkai untuk Nest Hub.

Frame perangkat untuk Nest Hub.

Tambahkan perangkat seluler khusus

Untuk menambahkan perangkat kustom:

  1. Klik daftar Perangkat, lalu pilih Edit.

    Edit.

  2. Di tab Setelan > Perangkat, pilih perangkat dari daftar yang didukung atau klik Tambahkan perangkat kustom untuk menambahkan perangkat Anda sendiri.

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

    Membuat perangkat kustom.

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

  4. Kembali ke area pandang, pilih perangkat yang baru ditambahkan dari daftar Dimensi.

Tampilkan penggaris

Klik Opsi lainnya Opsi lainnya. > Tampilkan penggaris untuk melihat penggaris. Satuan ukuran dari penggaris adalah piksel.

Tampilkan penggaris.

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

Aturan di 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.

Zoom.

Mengambil screenshot

Untuk mengambil screenshot dari hal yang Anda lihat di area pandang, klik Opsi lainnya. Opsi lainnya > Ambil screenshot.

Opsi Ambil screenshot di menu Opsi lainnya.

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.

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 Setelan pengambilan gambar., lalu pilih 4x pelambatan atau 6x pelambatan dari daftar CPU.

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.

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.

Menu Perintah.

Anda juga dapat menetapkan throttling jaringan dari panel Performance. Klik Setelan Tangkapan Setelan pengambilan gambar., lalu pilih 3G Cepat atau 3G Lambat dari daftar Jaringan.

Menyetel throttling jaringan dari panel Performa.

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 Sesuaikan dan kontrol DevTools., lalu pilih More tools > Sensors.

Sensor

Atau, tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) untuk membuka Menu Command, ketik Sensors, lalu pilih Show Sensors.

Tampilkan Sensor

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.

Geolocation

Setel orientasi

Untuk membuka UI orientasi, klik Customize and control DevTools Sesuaikan dan kontrol DevTools., lalu pilih More tools > Sensors.

Sensor

Atau, tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) untuk membuka Menu Command, ketik Sensors, lalu pilih Show Sensors.

Tampilkan Sensor

Pilih salah satu preset dari daftar Orientasi atau pilih Orientasi kustom untuk menetapkan nilai alfa, beta, dan gamma Anda sendiri.

Orientasi