Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Mengemulasikan dan Menguji Browser Lainnya

Tugas Anda belum selesai di tahap memastikan bahwa situs berjalan mulus di Chrome dan Android. Meskipun Device Mode bisa menyimulasikan berbagai perangkat lain seperti iPhone, kami sarankan agar Anda memeriksa solusi browser lain untuk emulasi.

TL;DR

  • Jika Anda tidak memiliki perangkat tertentu, atau ingin melakukan pemeriksaan cepat pada sesuatu, langkah terbaik adalah mengemulasikan perangkat langsung dari dalam browser Anda.
  • Emulator dan simulator perangkat memungkinkan Anda meniru situs development di berbagai perangkat dari tempat kerja Anda.
  • Emulator berbasis cloud memungkinkan Anda mengotomatisasikan pengujian unit untuk situs Anda di platform yang berbeda.

Emulator browser

Emulator browser sangat bermanfaat untuk menguji daya respons situs, tetapi tidak mengemulasikan perbedaan di API, dukungan CSS, dan perilaku tertentu yang ingin Anda lihat di browser seluler. Uji situs Anda pada browser yang berjalan di perangkat fisik agar yakin semuanya berjalan seperti yang diharapkan.

Tampilan Desain Responsif Firefox

Firefox memiliki tampilan desain responsif yang mendorong Anda berhenti memikirkan perangkat tertentu, tetapi sebaiknya eksplorasi perubahan desain pada ukuran layar yang umum atau layar Anda sendiri dengan menyeret tepinya.

F12 Emulation Edge

Untuk mengemulasikan Ponsel Windows, gunakan emulasi bawaan Microsoft Edge.

Karena Edge tidak dilengkapi kompatibilitas lawas, gunakan Emulasi IE 11 untuk menyimulasikan tampilan halaman Anda di versi lama Internet Explorer.

Emulator dan simulator perangkat

Simulator dan emulator perangkat tidak hanya menyimulasikan lingkungan browser, tetapi juga keseluruhan perangkat. Alat ini berguna untuk menguji hal-hal yang memerlukan integrasi OS, misalnya masukan formulir dengan keyboard virtual.

Android Emulator

Browser Bawaan Android Emulator
Browser Bawaan di Android Emulator

Saat ini, menginstal Chrome pada Android emulator tidak bisa dilakukan. Namun demikian, Anda bisa menggunakan Browser Android, Chromium Content Shell, dan Firefox untuk Android yang akan kita bahas nanti di panduan ini. Chromium Content Shell menggunakan mesin rendering Chrome yang sama, tetapi tidak dilengkapi fitur browser khusus apa pun.

Android emulator dilengkapi dengan Android SDK yang harus Anda download dari sini. Lalu ikuti petunjuk untuk menyiapkan perangkat virtual dan memulai emulator.

Setelah emulator dihidupkan, klik ikon Browser dan Anda pun bisa menguji situs pada Browser Bawaan untuk Android versi lama.

Chromium Content Shell di Android

Android Emulator Content Shell
Android Emulator Content Shell

Untuk menginstal Chromium Content Shell untuk Android, biarkan emulator berjalan dan jalankan perintah berikut di command prompt:

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

Sekarang Anda bisa menguji situs Anda dengan Chromium Content Shell.

Firefox di Android

Ikon Firefox di Android Emulator
Ikon Firefox di Android Emulator

Sama dengan Chromium Content Shell, Anda bisa mendapatkan APK untuk menginstal Firefox di emulator.

Download file .apk yang benar dari https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.

Dari sini, Anda bisa menginstal file pada emulator yang terbuka atau perangkat Android yang terhubung dengan perintah berikut:

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

Simulator iOS

Simulator iOS untuk Mac OS X satu paket dengan Xcode, yang bisa Anda instal dari App Store.

Setelah selesai, pelajari cara menggunakan simulator ini di dokumentasi Apple.

Modern.IE

VM Modern IE
VM Modern IE

Mesin Virtual Modern.IE memungkinkan Anda mengakses versi IE yang berbeda di komputer Anda melalui VirtualBox (atau VMWare). Pilih mesin virtual di halaman download di sini.

Emulator dan simulator berbasis cloud

Jika Anda tidak bisa menggunakan emulator dan tidak memiliki akses ke perangkat fisik, emulator berbasis cloud bisa menjadi pilihan terbaik. Keuntungan utama emulator berbasis cloud dibanding perangkat fisik dan emulator lokal adalah Anda bisa mengotomatiskan pengujian unit untuk situs Anda di berbagai platform yang berbeda.

  • BrowserStack (komersial) adalah yang paling mudah digunakan untuk pengujian manual. Anda bisa memilih sistem operasi, memilih versi browser dan jenis perangkat, memilih URL untuk dijelajahi, dan BrowserStack akan menghidupkan mesin virtual yang di-host yang dengannya Anda bisa berinteraksi. Anda juga bisa mengaktifkan beberapa emulator di layar yang sama, sehingga Anda bisa menguji bagaimana tampilan dan nuansa aplikasi Anda di berbagai perangkat yang berbeda sekaligus.
  • SauceLabs (komersial) memungkinkan Anda menjalankan pengujian unit di dalam emulator yang bisa menjadi sangat berguna untuk menuliskan skrip aliran melalui situs Anda dan melihat rekaman video aliran ini setelahnya pada berbagai perangkat. Anda juga bisa melakukan pengujian manual untuk situs Anda.
  • Device Anywhere (komersial) tidak menggunakan emulator, tetapi perangkat fisik yang bisa Anda kontrol dari jauh. Ini sangat berguna apabila Anda perlu mereproduksi masalah pada perangkat khusus dan tidak bisa melihat bug di opsi yang lain di panduan ini.

Masukan

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.