Ihre Aufgabe besteht nicht nur darin, dafür zu sorgen, dass Ihre Website in Chrome und Android einwandfrei funktioniert. Auch wenn der Gerätemodus eine Reihe anderer Geräte wie iPhones simulieren kann, empfehlen wir Ihnen, sich andere Browserlösungen für die Emulation anzusehen.
Zusammenfassung
- Wenn Sie kein bestimmtes Gerät haben oder etwas prüfen möchten, ist es am besten, das Gerät direkt in Ihrem Browser zu emulieren.
- Mit Geräteemulatoren und ‑simulatoren können Sie Ihre Entwicklungswebsite auf einer Reihe von Geräten von Ihrer Workstation aus nachahmen.
- Mit cloudbasierten Emulatoren können Sie Unit-Tests für Ihre Website auf verschiedenen Plattformen automatisieren.
Browser-Emulatoren
Browser-Emulatoren eignen sich hervorragend, um die Responsivität einer Website zu testen. Sie emulieren jedoch keine Unterschiede bei API, CSS-Unterstützung und bestimmten Verhaltensweisen, die Sie in einem mobilen Browser sehen würden. Testen Sie Ihre Website in Browsern auf echten Geräten, um sicherzustellen, dass alles wie erwartet funktioniert.
Responsive Design-Ansicht in Firefox
Firefox bietet eine Ansicht für responsives Design, die Sie dazu anregen soll, nicht mehr an bestimmte Geräte zu denken, sondern stattdessen zu erkunden, wie sich Ihr Design bei gängigen Bildschirmgrößen oder Ihrer eigenen Größe ändert, indem Sie die Ränder ziehen.
F12-Emulation von Edge
Verwenden Sie die integrierte Emulation von Microsoft Edge, um Windows Phones zu emulieren.
Da Edge keine Abwärtskompatibilität bietet, können Sie die Emulation von IE 11 verwenden, um zu simulieren, wie Ihre Seite in älteren Versionen des Internet Explorers aussehen würde.
Geräteemulatoren und Simulatoren
Gerätesimulatoren und ‑emulatoren simulieren nicht nur die Browserumgebung, sondern das gesamte Gerät. Sie eignen sich zum Testen von Funktionen, die eine Betriebssystemintegration erfordern, z. B. Formulareingaben mit virtuellen Tastaturen.
Android Emulator
Standardbrowser im Android-Emulator
Derzeit gibt es keine Möglichkeit, Chrome auf einem Android-Emulator zu installieren. Sie können jedoch den Android-Browser, die Chromium Content Shell und Firefox für Android verwenden, die wir später in diesem Leitfaden behandeln. Chromium Content Shell verwendet dieselbe Chrome-Rendering-Engine, aber ohne die browserspezifischen Funktionen.
Der Android-Emulator ist im Android SDK enthalten, das Sie hier herunterladen können. Folgen Sie dann der Anleitung, um ein virtuelles Gerät einzurichten und den Emulator zu starten.
Klicken Sie nach dem Starten des Emulators auf das Browsersymbol. Anschließend können Sie Ihre Website im alten Standardbrowser für Android testen.
Chromium Content Shell auf Android
Android Emulator Content Shell
Wenn Sie die Chromium Content Shell für Android installieren möchten, lassen Sie den Emulator laufen und führen Sie die folgenden Befehle in einem Eingabeaufforderung aus:
git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh
Sie können Ihre Website jetzt mit der Chromium Content Shell testen.
Firefox für Android
Firefox-Symbol im Android-Emulator
Ähnlich wie bei der Content Shell von Chromium können Sie ein APK herunterladen, um Firefox auf dem Emulator zu installieren.
Laden Sie die richtige APK-Datei von https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/ herunter.
Anschließend können Sie die Datei mit dem folgenden Befehl auf einem geöffneten Emulator oder einem verbundenen Android-Gerät installieren:
adb install <path to APK>/fennec-XX.X.XX.android-arm.apk
iOS-Simulator
Der iOS-Simulator für Mac OS X ist in Xcode enthalten, das Sie über den App Store installieren können.
Wenn Sie fertig sind, können Sie in der Dokumentation von Apple nachlesen, wie Sie mit dem Simulator arbeiten.
Modern.IE
Moderne IE-VM
Mit den virtuellen Maschinen von Modern.IE können Sie über VirtualBox (oder VMWare) auf verschiedene Versionen von IE auf Ihrem Computer zugreifen. Wählen Sie auf der Downloadseite eine virtuelle Maschine aus.
Cloudbasierte Emulatoren und Simulatoren
Wenn Sie die Emulatoren nicht verwenden können und keinen Zugriff auf echte Geräte haben, sind cloudbasierte Emulatoren die zweitbeste Lösung. Ein großer Vorteil von cloudbasierten Emulatoren gegenüber echten Geräten und lokalen Emulatoren besteht darin, dass Sie Unit-Tests für Ihre Website auf verschiedenen Plattformen automatisieren können.
- BrowserStack (kommerziell) ist für manuelle Tests am einfachsten zu verwenden. Sie wählen ein Betriebssystem, Ihre Browserversion und den Gerätetyp aus und geben eine URL für die Suche an. Daraufhin wird eine gehostete virtuelle Maschine gestartet, mit der Sie interagieren können. Sie können auch mehrere Emulatoren auf demselben Bildschirm starten, um die Darstellung Ihrer App auf mehreren Geräten gleichzeitig zu testen.
- Mit SauceLabs (kommerziell) können Sie Unit-Tests in einem Emulator ausführen. Das ist sehr nützlich, um einen Ablauf auf Ihrer Website zu scripten und sich die Videoaufzeichnung davon anschließend auf verschiedenen Geräten anzusehen. Sie können auch manuelle Tests mit Ihrer Website durchführen.
- Device Anywhere (kommerziell) verwendet keine Emulatoren, sondern echte Geräte, die Sie aus der Ferne steuern können. Das ist sehr nützlich, wenn Sie ein Problem auf einem bestimmten Gerät reproduzieren möchten und den Fehler mit keiner der Optionen in den vorherigen Anleitungen sehen können.
- Mit LambdaTest (kommerziell) können Sie manuelle browserübergreifende Tests in einer Kombination aus über 2.000 Browsern und Betriebssystemen durchführen. Nutzer können Videos von komplexen Fehlern aufzeichnen und sie über Integrationen wie MS Teams und Slack teilen. Nutzer können ihre Tests beschleunigen, indem sie sie parallel ausführen.