Karena kita sekarang berada di dunia mobile-first, menjadi lebih dan lebih penting untuk dapat menguji situs web dengan mudah pada ponsel, atau pada ponsel yang ditiru. Saya berkolaborasi dengan orang-orang yang bekerja di situs web dan penawaran media sosial, dan saya ingin mendorong mereka untuk secara teratur membuka situs web dari browser desktop mereka dalam tampilan seluler. Saya secara khusus memikirkan fitur "tampilan seluler" built-in browser, yang sering disembunyikan di antara semua alat pengembang lain yang disediakan browser, tetapi saya senang mempertimbangkan apa pun yang sama cepatnya untuk diatur.

Bagaimana Anda bisa membuka tampilan seluler suatu situs web dari browser desktop?

Firefox:

• Di Windows / Linux, tekan Ctrl+ Shift+M
• Di macOS, tekan option+ command+M

Anda juga dapat menemukan item menu di bawah ("Alat"), "Pengembang Web", "Mode Desain Responsif".

Chrome:

Anda harus membuka "Alat Pengembang" terlebih dahulu:

• Di Windows / Linux, tekan Ctrl+ Shift+ Iatau hanyaF12
• Di macOS, tekan option+ command+I

Setelah alat pengembang terbuka dan fokus, Anda dapat membuka bilah alat perangkat:

• Di Windows / Linux, tekan Ctrl+ Shift+M
• Di macOS, tekan command+ shift+M

Anda juga dapat menemukan item menu dengan membuka alat pengembang ("Alat Lainnya", "Alat Develepor"), lalu mengklik ikon yang tampak seperti ponsel di depan tabel "Toggle device toolbar".

Safari:

Sepertinya Apple telah menonaktifkan pintasan keyboard secara default untuk memasuki mode desain responsif. Anda dapat mengikuti tutorial ini tentang mengonfigurasi pintasan keyboard untuknya .

Anda dapat menemukan item menu dengan mengklik "Kembangkan", "Masuk ke Mode Desain Responsif". Jika Anda tidak dapat melihat item menu "Kembangkan", Anda harus mengaktifkannya dengan membuka "Preferensi", "Tingkat Lanjut", dan mencentang "Tampilkan menu Kembangkan di bilah menu".

Tepi:

• Tekan F12untuk membuka alat pengembang, dan Ctrl+ 7untuk membuka "tab Emulasi". Konfigurasikan perangkat yang ingin Anda tiru.

Anda dapat membuka alat pengembang menggunakan mouse dengan mengklik kanan di dalam halaman web, dan memilih "periksa elemen".

Jawaban Flimm adalah 100% benar. Kalau-kalau mengingat cara pintas terlalu merepotkan, tombol biru ini di Alat Pengembang untuk beralih antara tampilan web dan tampilan seluler / tablet:

Atau dengan Firefox:

Setelah mengaktifkan bilah alat perangkat, Anda kemudian dapat memilih merek dan model perangkat yang ingin Anda tiru dari menu dropdown.

Untuk tujuan pengujian, saya menggunakan situs web berikut: -

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

Kedua situs di atas memungkinkan saya untuk melihat aplikasi web saya dalam beberapa lebar perangkat.

Tambahkan ekstensi "pengalih agen pengguna" di browser Anda dan tentukan agen pengguna seluler. Jika situs webnya cukup pintar, ia akan melayani Anda versi yang dioptimalkan untuk seluler.

Saya tidak akan merekomendasikan ekstensi tertentu. Yang ideal harus memiliki preset untuk peramban seluler bawaan dan kemampuan untuk mengaktifkan atau menonaktifkan pergantian agen pengguna berdasarkan per-situs web.

Jawaban di atas cocok untuk mereka yang suka menggunakan satu browser, atau memiliki "ruang kerja" desktop terbatas (mis. Monitor tunggal kurang dari 21 "pada resolusi rendah).

Sebenarnya ada solusi yang lebih menarik yang baru-baru ini saya temukan: https://blisk.io/

Saya akan menahan diri untuk tidak menggunakan (semacam) "tautan afiliasi" untuk setiap keuntungan pribadi (Ada "sistem berbasis token" yang dapat Anda peroleh kredit untuk mendapatkan hal-hal seperti "ruang cloud tim" & "fitur premium" gratis untuk digunakan dengan itu), tetapi Blisk sebenarnya cukup manis.

"Peramban yang dibuat untuk pengembangan" berbasis Chromium ini menyediakan banyak cara untuk mendemonstrasikan laman di berbagai perangkat dengan "panel" vertikal di sisi KIRI, sama seperti Anda melihat Alat Pengembang Chrome default ke kolom vertikal kanan.

Ini terlihat bekerja. Meskipun ada beberapa batasan untuk "fungsionalitas diperluas freemium", itu masih berfungsi dengan baik untuk "melihat dulu" versi PC dan Mobile dari halaman / situs Anda dalam perbandingan berdampingan. Fitur berbayar tampaknya juga sangat bagus jika Anda bekerja di tim jarak jauh (meskipun saya pribadi berpikir itu perlu program "test drive" yang lebih baik sebelum mengaitkan orang dengan biaya bulanan).

Pengungkapan penuh: ada "batas waktu" yang sangat mengganggu per hari pada bagian pratinjau seluler (beralih terbuka / tertutup dari ikon di sebelah kanan bilah alamat - ubah "pratinjau perangkat" dari tautan kecil ke-ke-the- menu di sudut kanan atas "Tampilkan daftar perangkat").

BliskDemoScreenshot

Juga: Saya telah menemukan beberapa trik yang sangat bagus dengan Ekstensi Browser seperti 2 berbeda "User-Agent Switcher" dari Chrome / Firefox yang sedikit lebih jauh dengan membiarkan Anda beralih antara string agen pengguna browser dari berbagai Sistem Operasi DAN browser untuk mereka.

Saya lebih suka rasa "esolutions.se" karena betapa mudahnya menambahkan string agen-pengguna kustom ke daftar sebanyak mungkin kustomisasi yang Anda inginkan (berjalan offline juga, yang dapat berguna dalam kasus-kasus tertentu): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

Bagaimanapun, itu 2 sen saya. : P