Cara Pratinjau Situs Web Anda di Berbagai Perangkat Menggunakan Google Chrome

Saat Anda membuat situs web, Anda ingin situs itu responsif dan beradaptasi dengan berbagai ukuran layar. Salah satu cara untuk menguji ini adalah dengan menggunakan alat pengembang bawaan Google Chrome.

DevTools Chrome memungkinkan Anda untuk men-debug berbagai aspek situs web Anda. Ini termasuk mengubah dan melihat pratinjau kode sumber HTML dan CSS. Ini juga memungkinkan Anda untuk men-debug kode JavaScript sisi klien, dan melihat lalu lintas jaringan.

DevTools juga memiliki opsi untuk melihat pratinjau situs web Anda di perangkat yang berbeda. Ini termasuk berbagai jenis perangkat seluler, iPad, tablet, dan lainnya.

Untuk membuka toolbar Perangkat di Google Chrome, Anda perlu membuka Jendela Alat Pengembang Chrome:

1. Buka situs web.
2. Klik kanan pada halaman dan klik Memeriksa.
3. Jendela Chrome DevTools akan terbuka. Ini mungkin terbuka ke samping atau bawah browser Anda, atau sebagai jendela baru.
4. Di kiri atas jendela, ada dua ikon. Klik pada ikon yang menunjukkan beberapa perangkat dengan ukuran berbeda.
instagram viewer
5. Layar akan berubah untuk menunjukkan kepada Anda seperti apa tampilan situs web di perangkat seluler.

Cara Beralih Antara Perangkat Yang Berbeda

Gunakan tarik-turun di bagian atas bilah alat perangkat untuk beralih di antara perangkat yang berbeda.

1. Bagian paling atas bilah alat akan menampilkan jenis perangkat apa yang Anda gunakan saat ini untuk melihat situs web Anda. Klik pada dropdown untuk memilih perangkat lain dari daftar.
2. Alih-alih memilih perangkat yang ada, Anda dapat memilih untuk melihat situs web dalam mode responsif. Klik pada dropdown dan pilih Responsif pilihan.
3. Di samping tarik-turun, Anda juga dapat memilih untuk memasukkan lebar dan tinggi khusus perangkat.
4. Alih-alih mengetik lebar dan tinggi, Anda juga dapat mengeklik dan menyeret sudut jendela untuk menyesuaikan ukurannya.

Cara Menambahkan Perangkat Kustom

Jika Anda ingin menyimpan lebar dan tinggi khusus, Anda dapat menambahkan perangkat khusus. Toolbar perangkat kemudian akan menampilkan perangkat baru Anda di dropdown untuk perangkat.

1. Klik pada dropdown yang mencantumkan semua perangkat.
2. Klik Sunting.
3. Di bawah bilah samping Pengaturan, pastikan Anda memiliki Perangkat tab dipilih. Di sini, Anda juga dapat melihat daftar perangkat lain yang dapat Anda pilih.
4. Klik Tambahkan perangkat khusus.
5. Masukkan nama, lebar, dan tinggi perangkat. Pastikan Anda juga memilih jenis perangkat, seperti apakah itu perangkat seluler atau desktop. Jika Anda memperluas Petunjuk klien agen pengguna pilihan, Anda dapat menambahkan detail lain seperti model perangkat, merek, atau versi.
6. Klik Menambahkan.
7. Kembali ke dropdown yang mencantumkan semua perangkat. Anda akan melihat perangkat kustom baru Anda pada daftar.
8. Anda dapat mengedit detail ini lagi nanti dengan kembali ke halaman perangkat khusus. Klik pada edit tombol di sebelah nama perangkat Anda untuk mulai mengedit.

Sangat berguna untuk dapat melihat pratinjau situs web Anda pada perangkat dan ukuran layar yang berbeda, karena beberapa alasan.

Pertama, Anda dapat menguji kinerja situs web Anda di perangkat yang berbeda. Beberapa ponsel mungkin memiliki kecepatan jaringan atau pelambatan CPU yang lebih cepat daripada yang lain.

Toolbar perangkat memungkinkan Anda untuk beralih di antara opsi kecepatan jaringan yang berbeda. Ini memungkinkan Anda menguji kecepatan panggilan apa pun ke server, atau menguji pemuatan dan rendering data di situs web Anda.

Selain itu, Anda juga dapat melihat seperti apa desain pada perangkat tertentu, dari sudut pandang UI. Jika Anda menggunakan Kueri media CSS, Anda dapat menggunakan alat ini untuk memeriksa apakah mereka berfungsi seperti yang Anda harapkan.

Anda dapat menggunakan jendela DevTools Google Chrome untuk menguji bagaimana situs web Anda beradaptasi dengan berbagai ukuran layar dan untuk memastikan situs web Anda responsif. Anda juga dapat menggunakannya untuk menguji kinerja situs web Anda, dan jika kueri media Anda berfungsi seperti yang diharapkan.

Anda juga dapat menggunakan DevTools Google Chrome untuk tujuan lain. Anda dapat menggunakannya untuk men-debug masalah CSS apa pun dengan mengubah CSS di bawah tab Gaya di jendela Elemen. Ini memungkinkan Anda untuk melihat perubahan CSS secara langsung, yang dapat mempercepat alur kerja pengkodean Anda.

Cara Menggunakan Google Chrome untuk Debug CSS

Baca Selanjutnya