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:

  1. Inspect element di browser.
  2. Klik opsi Toggle device toolbar yang ada icon ponsel dan tablet.
  3. Tampilan halaman web akan berubah menjadi mode viewport responsif berdasarkan bawaan dari browser.
  4. Untuk menambahkan perangkat seluler kita, masuk ke menu settings dengan menekan tombol F1 dan pilih menu Devices.
  5. Di menu Devices, klik tombol Add custom device... untuk memasukkan data-data penunjang yang didapatkan dari mydevice.io.
  6. Device name isiannya bebas, saya memberikan nama Xiaomi A1
  7. Pada field Width saya berikan nilai dari @media (device-width). Di mydevice.io nilainya adalah 360px+ namun saya cukup memberikan nilai 640 tanpa embel-embel px+.
  8. Pada field height saya berikan nilai dari @media (device-height). Di mydevice.io nilainya adalah 640px+ namun saya cukup memberikan nilai 360 tanpa embel-embel px+.
  9. Pada field Device pixel ratio saya berikan nilai dari CSS pixel-ratio. Di mydevice.io nilainya adalah 3.
  10. Pada field User agent string saya berikan nilai dari User agent. Di mydevice.io nilainya adalah Mozilla/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?

  1. 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.
  2. Memudahkan saya untuk memantau tampilan web tanpa USB debugging karena data-data penunjang sudah saya masukkan ke dalam device toolbar.
  3. 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 Pixel 2 model emulated device

Tampilan website menggunakan Xiaomi A1 mode emulated device

Tampilan website menggunakan Xiaomi A1 model 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.