Menguji paparan mobile dengan Google Chrome Browser

Seperti yang kita sedia maklum, kebelakangan ini term/keyword Responsive design begitu popular. Terdapat banyak juga css framework yang memberi sokongan responsive design seperti Bootstrap, Zurb Foundation, Gumby, Skeleton dan banyak lagi.

Responsive web menjadi popular disebabkan hadirnya peranti-peranti mobile dan tablet yang membolehkan pengguna melayar internet.

Sebagai web designer atau programmer , sudah tentu menjadi rutin untuk anda menguji paparan web anda. Paparan menggunakan monitor, menggunakan tablet dan mobile.



Cara paling mudah untuk menguji paparan responsive adalah dengan resize browser kita. secara tidak langsung, paparan web kita juga akan berubah mengikut saiz viewport browser. Tetapi adakah cara ini cara yang betul?. Mungkin anda juga menguji dengan menggunakan online mobile test site seperti mobiletest.me . Tetapi masih ada kekangan disini... kita perlu upload file keserver terlebih dahulu sebelum mengujinya. Bagaimana untuk menguji secara offline?.

Jawapannya adalah dengan menggunakan Mobile emulation yang terbina dalam Chrome Browser. ( saya pun baru perasan setelah lama menggunakan developer tools ini )

caranya mudah saja, buka laman web yang ingin di uji menggunakan Chrome Browser. Anda juga boleh membuka local file disini seperti biasa yang anda lakukan untuk menguji web secara local.




Ini adalah paparan desktop. Untuk menguji paparan mobile, anda klik kanan mouse -> inspect element untuk membuka Developer Tools. ( developer should know this )


Klik ikon "Drawer (1) " dan kemudian "Emulation (2)". Anda akan lihat pilihan device (3) , pilih device yang anda ingin uji paparannya dari senarai dan kemudian klik "Emulate (4)" untuk Google Chrome emulate sebagai device tersebut. Klik "Reset (5)" untuk reset emulation. Anda boleh browse mana-mana laman web untuk lihat bagaimana ia dipaparkan didalam device tersebut. Pastikan anda klik butang "Emulate (4) " dan "refresh (7)" jika anda mengubah device lain.

untuk paparan yang lebih kemas, anda boleh dock Developer Tools ke bahagian kanan browser dengan klik pada ikon dock (8). Paparan baru anda seperti dibawah




Anda akan melihat ruangan "grey (9)". Ini menunjukkan design anda keluar dari viewport mobile tersebut. Ia normal jika keluar menegak seperti paparan di bawah (9) kerana user akan scroll up/down paparan tersebut. Tetapi jika grey area(9) tersebut melebihi width viewport, anda mengkin perlu membuat sesuatu. Kecuali anda semamangnya ingin paparan sebegitu. Anak panah (10) menunjukkan paparan didalam viewport device tersebut.



Anda boleh mengubah user agent, sensor dan screen resolution (11) jika device anda tiada dalam senarai device.

Maklumat lanjut berkenaan mobile emulation : https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

Kemaskini terbaru
Klik (12) untuk paparan mobile
dalam kemaskini terbaru ini juga, google chrome didatangkan dengan network throttling. Ini memudahkan lagi kita untuk menguji kadar load website kita untuk internet conenction yang berbeza.
Ada sebarang pertanyaan, cadangan, komen atau pembetulan? Sila nyatakan di ruangan komen di bawah.