Sie müssen nicht nur dafür sorgen, dass Ihre Website problemlos mit Chrome und Android kompatibel ist. Der Gerätemodus kann zwar eine Reihe anderer Geräte wie iPhones simulieren, dennoch empfehlen wir dir, andere Browserlösungen für die Emulation zu nutzen.
Zusammenfassung
- Wenn Sie ein bestimmtes Gerät nicht haben oder etwas stichprobenartig überprüfen möchten, sollten Sie das Gerät direkt in Ihrem Browser 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 Einheitentests für Ihre Website auf verschiedenen Plattformen automatisieren.
Browseremulatoren
Browseremulatoren eignen sich hervorragend zum Testen der Reaktionsfähigkeit einer Website. Sie emulieren jedoch keine Unterschiede in der API, der CSS-Unterstützung und bestimmten Verhaltensweisen wie in einem mobilen Browser. Testen Sie Ihre Website in Browsern auf echten Geräten, um zu prüfen, ob alles erwartungsgemäß funktioniert.
Firefox: Ansicht „Responsives Design“
Firefox bietet eine responsive Designansicht, bei der Sie nicht mehr auf bestimmte Geräte denken sollten. Stattdessen können Sie durch Ziehen der Ränder herausfinden, wie sich das Design bei gängigen Bildschirmgrößen oder Ihrer eigenen Größe ändert.
F12-Emulation von Edge
Verwenden Sie die integrierte Emulation von Microsoft Edge, um Windows Phones zu emulieren.
Da Edge keine ältere Kompatibilität bietet, verwenden Sie die Emulation von IE 11, um zu simulieren, wie Ihre Seite in älteren Versionen von Internet Explorer aussehen würde.
Geräteemulatoren und -simulatoren
Gerätesimulatoren und Emulatoren simulieren nicht nur die Browserumgebung, sondern das gesamte Gerät. Sie sind nützlich, um Dinge zu testen, 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 werden. Chromium Content Shell verwendet das gleiche Rendering-Modul von Chrome, verfügt jedoch nicht über die browserspezifischen Funktionen.
Der Android Emulator wird mit dem Android SDK geliefert, das Sie hier herunterladen müssen. Folgen Sie dann der Anleitung zum Einrichten eines virtuellen Geräts und zum Starten des Emulators.
Klicken Sie nach dem Starten des Emulators auf das Browsersymbol, um Ihre Website im alten Standardbrowser für Android zu testen.
Chromium Content Shell für Android
Content Shell des Android-Emulators
Wenn Sie die Chromium Content Shell für Android installieren möchten, führen Sie in der Eingabeaufforderung die folgenden Befehle aus:
git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh
Jetzt können Sie Ihre Website mit der Chromium Content Shell testen.
Firefox auf Android-Geräten
Firefox-Symbol im Android-Emulator
Ähnlich wie bei der Content Shell von Chromium können Sie ein APK herunterladen, um Firefox im Emulator zu installieren.
Laden Sie die richtige APK-Datei von https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/ herunter.
Von hier aus können Sie die Datei mit dem folgenden Befehl auf einem offenen Emulator oder 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 wird mit Xcode geliefert, das Sie über den App Store installieren können.
Wenn Sie fertig sind, erfahren Sie in der Dokumentation von Apple, wie Sie mit dem Simulator arbeiten.
Modern.IE
Moderne IE-VM
Mit virtuellen Modern.IE-Maschinen können Sie auf Ihrem Computer über VirtualBox (oder VMware) auf verschiedene Versionen von IE 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 nächstbeste Lösung. Ein großer Vorteil von cloudbasierten Emulatoren gegenüber echten Geräten und lokalen Emulatoren besteht darin, dass Sie Einheitentests für Ihre Website auf verschiedenen Plattformen automatisieren können.
- BrowserStack (kommerziell) ist am einfachsten für manuelle Tests zu verwenden. Sie wählen ein Betriebssystem, Ihre Browserversion und den Gerätetyp sowie eine URL aus. Daraufhin wird eine gehostete virtuelle Maschine gestartet, mit der Sie interagieren können. Sie können auch mehrere Emulatoren auf demselben Bildschirm starten und so das Erscheinungsbild Ihrer App auf mehreren Geräten gleichzeitig testen.
- Mit SauceLabs (kommerziell) können Sie Einheitentests in einem Emulator ausführen. Dies kann sehr nützlich sein, um Skripte für einen Fluss durch Ihre Website zu erstellen und sich die Videoaufzeichnung danach auf verschiedenen Geräten anzusehen. Sie können Ihre Website auch manuell testen.
- Device Anywhere (kommerziell) verwendet keine Emulatoren, sondern echte Geräte, die Sie fernsteuern können. Das ist sehr nützlich, wenn Sie ein Problem auf einem bestimmten Gerät reproduzieren müssen und den Fehler mit keiner der Optionen in den vorherigen Anleitungen finden können.
- Mit LambdaTest (kommerziell) können Sie manuelle browserübergreifende Tests mit einer Kombination von mehr als 2.000 Browsern und Betriebssystemen durchführen. Nutzer können Videos von komplexen Fehlern aufzeichnen und diese über Integrationen wie MS Teams, Slack usw. teilen. Nutzer können ihre Tests beschleunigen, indem sie Tests parallel ausführen.