Testing Website Responsive di Browser Chrome


Chrome-EmulationMencoba suatu design website responsive pada banyak browser dan device seringkali membuat pusing kepala para programmer yang bergelut dibidang pembuatan website. Masalah seperti, bagaimana navigasi menu akan responsive pada semua resolusi layar? bagaimana tampilan responsive untuk perangkat mobile? apakah style css akan berpengaruh pada perangkat mobile tertentu?, masalah seperti ini akan terus ada dalam pembuatan sebuah website responsive.

Untuk membantu menyelesaikan masalah ini, sobat bisa bisa mencoba menggunakan Device Emulation yang ada pada browser Google Chrome.

Chrome Device Emulation

Google pada Chrome ver 32 ke atas telah menambahkan Tool untuk meniru perilaku perangkat mobile dalam menampilkan halaman website. Melalui Chrome Dev Tools sobat bisa mengetest website responsive buatan sobat pada berbagai perangkat mobile dengan mudah, berikut langkah-langkahnya..

Langkah 1: Buka Dev Tools

Sobat bisa membuka Chrome Dev Tools dengan menekan F12 pada Windows atau Cmd + Opt + I pada Mac.

Chrome-Emulation

Langkah 2: Buka Drawer

Klik icon pada bagian pojok kanan atas dalam Dev Tools untuk membuka Drawer.

step-2

Langkah 3: Buka Emulation Tab

Setelah Drawer muncul dari bawah Dev Tools akan terlihat beberapa tab, klik Emulation Tab.

step-3

Langkah 4: Pilih Device dan Refresh

Dari menu drop-down sobat bisa memilih berbagai perangkat yang ada. Contoh, kita pilih Apple iPhone 5. Setelah dipilih klik tombol Emulate. Kemudian layar akan mengecil sesuai ukuran Apple iPhone 5, selanjutnya silahkan tekan F5 atau klik kanan pilih Reload untuk refresh halaman website.

step-4

Untuk selanjutnya silahkan sobat coba2 device lainnya yang tersedia untuk pengembangan website responsive sobat.

step-5

Semoga bermanfaat 🙂


abdee

a husband & father who like to blogging, learn to code, wordpress enthusiasm, little bit twitter and facebook, winning eleven fan, eager to move forward for better knowledge.

Related Posts Plugin for WordPress, Blogger...