Umumnya, jika ingin melakukan simulasi tampilan website di perangkat seluler kita menggunakan remote USB debugging pada browser seperti Chrome. Di tulisan ini, saya akan menggunakan bantuan dari mydevice.io untuk mendapatkan data-data penunjang simulasi perangkat seluler sehingga tidak perlu bergantung dengan remote USB debugging.
Pertama, silahkan menuju website mydevice.io melalui perangkat seluler yang akan digunakan untuk simulasi tampilan website di perangkat seluler. Sebagai contoh, saya menggunakan Xiaomi A1 untuk mendapatkan data-data penunjang seperti lebar (width) di bagian @media (device-width)
, tinggi (height) di bagian @media (device-height)
, pixel ratio di bagian CSS pixel-ratio
, dan user agent.
Kedua, masuk ke dalam browser via desktop dan lakukan langkah-langkah berikut:
- Inspect element di browser.
- Klik opsi
Toggle device toolbar
yang ada icon ponsel dan tablet. - Tampilan halaman web akan berubah menjadi mode viewport responsif berdasarkan bawaan dari browser.
- Untuk menambahkan perangkat seluler kita, masuk ke menu settings dengan menekan tombol
F1
dan pilih menuDevices
. - Di menu
Devices
, klik tombolAdd custom device...
untuk memasukkan data-data penunjang yang didapatkan dari mydevice.io. Device name
isiannya bebas, saya memberikan namaXiaomi A1
- Pada field
Width
saya berikan nilai dari@media (device-width)
. Di mydevice.io nilainya adalah360px+
namun saya cukup memberikan nilai640
tanpa embel-embelpx+
. - Pada field
height
saya berikan nilai dari@media (device-height)
. Di mydevice.io nilainya adalah640px+
namun saya cukup memberikan nilai360
tanpa embel-embelpx+
. - Pada field
Device pixel ratio
saya berikan nilai dariCSS pixel-ratio
. Di mydevice.io nilainya adalah3
. - Pada field
User agent string
saya berikan nilai dariUser agent
. Di mydevice.io nilainya adalahMozilla/5.0 (Linux; Android 9; Mi A1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.101 Mobile Safari/537.36
Perlu diingat bahwa nilai dari langkah 7 sampai 10 itu disesuaikan dengan perangkat yang Anda gunakan. Jika Anda mengalami kesulitan, saya sediakan videonya di bawah.
Lantas, apa gunanya bila saya menambahkan data perangkat saya ke dalam browser bila saya cukup dengan remote USB debugging?
- Saya sering mengalami kegagalan USB debugging via browser karena kabel USB tidak cocok atau tidak tersambung dengan baik pada smartphone. Kadang kalau bergeser sedikit bisa-bisa USB debugging terputus di tengah jalan.
- Memudahkan saya untuk memantau tampilan web tanpa USB debugging karena data-data penunjang sudah saya masukkan ke dalam
device toolbar
. - Ketika Anda mengetes tampilan sebuah mobile website menggunakan perangkat peniru (emulated device) seperti
Pixel 2
tidak serta merta hasil yang tampilannya seperti di perangkat seluler milik saya seperti Xiaomi A1. Saya menggunakan website komunitas PHPBali sebagai contoh.
Tampilan website menggunakan Pixel 2 mode emulated device

Tampilan website menggunakan Xiaomi A1 mode emulated device

Menurut saya, fungsi dari emulated device ini menggantikan remote USB debugging. Emulated device ini hanya sebatas membantu menangani tampilan web di beragam perangkat seluler karena untuk mengukur performa seberapa cepat website peran remote USB debugging sangat berarti.
Mydevice io memiliki fitur untuk mendeteksi fitur-fitur browser apa saja yang tersedia atau tidak sesuai dengan perangkat selular dan browser yang kita akses. Semoga bermanfaat.