Gunakan Device Mode untuk memperkirakan bagaimana tampilan dan kinerja halaman di perangkat seluler.
Device Mode adalah nama untuk koleksi fitur longgar di Chrome DevTools yang membantu Anda menyimulasikan perangkat seluler. Fitur ini meliputi:
- Menyimulasikan viewport seluler
- Membatasi jaringan
- Membatasi CPU
- Menyimulasikan geolokasi
- Menyetel orientasi
Batasan
Anggap Device Mode sebagai perkiraan urutan pertama bagaimana halaman Anda terlihat dan terasa di perangkat seluler. Dengan Device Mode, sebenarnya Anda tidak menjalankan kode di perangkat seluler. Anda menyimulasikan pengalaman pengguna ponsel dari laptop atau desktop.
Ada beberapa aspek perangkat seluler yang tidak pernah bisa disimulasikan DevTools. Misalnya, arsitektur CPU seluler sangat berbeda dari laptop atau CPU desktop. Jika ragu, tindakan terbaik yaitu menjalankan halaman di perangkat seluler. Gunakan Proses Debug dari Jauh untuk melihat, mengubah, men-debut, dan menghasilkan analisis kode halaman dari laptop atau desktop meski alat ini sebenarnya berjalan di perangkat seluler.
Menyimulasikan viewport seluler
Klik Toggle Device Toolbar untuk membuka UI yang
memungkinkan Anda menyimulasikan viewport seluler.

Secara default, Toolbar Perangkat terbuka dalam Mode Viewport Responsif.
Mode Viewport Responsif
Tarik pengendali untuk mengubah ukuran viewport ke dimensi mana pun yang Anda perlukan. Atau, masukkan nilai tertentu
di kotak lebar dan tinggi. Di Gambar 2, lebar disetel ke 628
dan tinggi disetel ke
662
.

Tampilkan kueri media
Untuk menampilkan titik putus kueri media di atas viewport, klik More options dan lalu pilih Show media queries.

Klik titik putus untuk mengubah lebar viewport sehingga titik putus dipicu.

Mode Viewport Perangkat Seluler
Untuk menyimulasikan dimensi perangkat seluler tertentu, pilih perangkat dari daftar Perangkat.

Putar viewport ke orientasi lanskap
Klik Rotate untuk memutar viewport ke orientasi lanskap.

Perhatikan bahwa tombol Rotate akan muncul jika Toolbar Perangkat tipis.

Baca juga Atur orientasi.
Tampilkan bingkai perangkat
Saat menyimulasikan dimensi perangkat seluler tertentu seperti iPhone 6, buka More options dan pilih Show device frame untuk menampilkan bingkai perangkat fisik di sekitar viewport.


Tampilkan aturan
Klik More options dan pili Show rulers untuk melihat aturan di atas dan di sebelah kiri viewport. Unit pengukuran aturan adalah piksel.


Zoom viewport
Gunakan daftar Zoom untuk memperbesar atau memperkecil.

Batasi jaringan dan CPU
Untuk membatasi jaringan dan CPU, pilih Mid-tier mobile atau Low-end mobile dari daftar Pembatasan.

Ponsel tingkat tengah menyimulasikan 3G cepat dan membatasi CPU, sehingga koneksi ini 4 kali lebih lambat daripada biasanya. Ponsel kelas bawah menyimulasikan 3G lambat dan membatasi CPU 6 kali lebih lambat daripada biasanya. Perlu diingat bahwa membatasi relatif terhadap kemampuan normal laptop atau desktop.
Perhatikan bahwa daftar Pembatasan akan disembunyikan jika Toolbar Perangkat terbatas.

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

Batasi jaringan saja
Untuk membatasi jaringan saja dan bukan CPU, buka panel Jaringan dan pilih Fast 3G atau Slow 3G dari daftar Pembatasan.

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

Anda juga bisa mengatur pembatasan jaringan dari panel Performance. Klik
Capture Settings lalu
pilih Fast 3G atau Slow 3G dari daftar Network.

Ganti geolokasi
Untuk membukat UI penggantian lokasi, klik Customize and control DevTools
lalu pilih
More tools > Sensors.

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

Pilih salah satu preset dari daftar Geolocation, atau pilih Custom location untuk memasukkan koordinat Anda sendiri, atau pilih Location unavailable untuk menguji halaman bertindak saat geolokasi dalam kondisi error.

Atur 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, Chrome OS) untuk membuka
Menu Perintah, ketik Sensors
, lalu pilih Show Sensors.

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

Masukan
Baca Gabung dengan komunitas DevTools untuk mengetahui cara lain untuk meninggalkan masukan.