Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Menyimulasikan Perangkat Seluler dengan Device Mode di Chrome DevTools

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:

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 Beralih Toolbar Perangkat untuk membuka UI yang memungkinkan Anda menyimulasikan viewport seluler.

Toolbar Perangkat.
Gambar 1. Toolbar Perangkat

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.

Pengendali untuk mengubah dimensi viewport saat dalam Mode Viewport Responsif.
Gambar 2. Pengendali untuk mengubah dimensi viewport saat dalam Mode Viewport Responsif

Tampilkan kueri media

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

Tampilkan kueri media.
Gambar 3. Tampilkan kueri media

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

Klik titik putus untuk mengubah lebar viewport.
Gambar 4. Klik titik putus untuk mengubah lebar viewport

Mode Viewport Perangkat Seluler

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

Daftar Perangkat.
Gambar 5. Daftar Perangkat

Putar viewport ke orientasi lanskap

Klik Rotate Putar untuk memutar viewport ke orientasi lanskap.

Orientasi lanskap.
Gambar 6. Orientasi lanskap

Perhatikan bahwa tombol Rotate akan muncul jika Toolbar Perangkat tipis.

Toolbar Perangkat.
Gambar 7. Toolbar Perangkat

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 bingkai perangkat.
Gambar 8. Tampilkan bingkai perangkat
Bingkai perangkat untuk iPhone 6.
Gambar 9. Bingkai perangkat untuk iPhone 6

Tampilkan aturan

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

Tampilkan aturan.
Gambar 10. Tampilkan aturan
Aturan di atas dan di sebelah kiri viewport.
Gambar 11. Aturan di atas dan di sebelah kiri viewport

Zoom viewport

Gunakan daftar Zoom untuk memperbesar atau memperkecil.

Zoom.
Gambar 11. Zoom

Batasi jaringan dan CPU

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

Daftar Pembatasan.
Gambar 12. 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.

Toolbar Perangkat.
Gambar 13. Toolbar Perangkat

Batasi CPU saja

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

Daftar CPU.
Gambar 14. 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.

Daftar Pembatasan.
Gambar 14. 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.

Menu Perintah.
Gambar 15. Menu Perintah

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

Mengatur pembatasan jaringan dari panel Kinerja.
Gambar 16. Mengatur pembatasan jaringan dari panel Kinerja.

Ganti geolokasi

Untuk membukat UI penggantian lokasi, klik Customize and control DevTools Sesuaikan dan kontrol DevTools lalu pilih More tools > Sensors.

Sensor
Gambar 17. Sensor

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

Tampilkan Sensor
Gambar 18. Tampilkan Sensor

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.

Geolokasi
Gambar 19. Geolokasi

Atur orientasi

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

Sensor
Gambar 20. Sensor

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

Tampilkan Sensor
Gambar 21. Tampilkan Sensor

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

Orientasi
Gambar 22. Orientasi

Masukan

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

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