Emulieren und Testen anderer Browser

Ihre Aufgabe endet nicht mit der Sicherstellung, dass Ihre Website über android Microsoft Edge funktioniert. Auch wenn der Gerätemodus in der Lage ist, eine Reihe anderer Geräte wie iPhones zu simulieren, empfehlen wir Ihnen, Lösungen für die Emulation von anderen Browsern zu prüfen.

Zusammenfassung

  • Wenn Sie nicht über ein bestimmtes Gerät verfügen oder eine Spotüberprüfung für etwas unternehmen möchten, besteht die beste Option darin, 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 Arbeitsstation nachahmen.
  • Mit cloudbasierten Emulatoren können Sie Komponententests für Ihre Website auf verschiedenen Plattformen automatisieren.

Browseremulatoren

Browseremulatoren n nen sich gut für das Testen der Reaktionsfähigkeit einer Website n nen, aber jeder emuliert keine Unterschiede in API, CSS-Unterstützung und bestimmten Verhaltensweisen, die in einem mobilen Browser angezeigt werden. Testen Sie Ihre Website auf Browsern, die auf echten Geräten ausgeführt werden, um sicher zu sein, dass sich alles wie erwartet verhält.

Firefox Responsive Design View

Firefox verfügt über eine reaktionsfähige Entwurfsansicht, die Sie ermutigt, nicht mehr an bestimmte Geräte zu denken und stattdessen zu untersuchen, wie sich Ihr Design bei gängigen Bildschirmgrößen oder Ihrer eigenen Größe ändert, indem Sie die Ränder ziehen.

EdgeHTML-Emulation

Verwenden Sie zum Emulieren Windows Telefone die Microsoft Edge (EdgeHTML) integrierte Emulation.

Verwenden Sie die IE 11-Emulation, um zu simulieren, wie Ihre Seite in älteren Versionen von Internet Explorer aussehen kann.

Geräteemulatoren und -simulatoren

Gerätesimulatoren und Emulatoren simulieren nicht nur die Browserumgebung, sondern das gesamte Gerät. Jede dieser Funktionen ist hilfreich, um Dinge zu testen, die eine Betriebssystemintegration erfordern, z. B. Formulareingaben mit virtuellen Tastaturen.

Android-Emulator

Derzeit gibt es keine Möglichkeit, Microsoft Edge auf einem Android-Emulator zu installieren. Sie können jedoch den Android-Browser, die Chromium Inhaltsshell und Firefox für Android verwenden, die wir später in diesem Handbuch lesen. Chromium Die Inhaltsshell führt das gleiche Chromium Renderingmodul wie Microsoft Edge, kommt jedoch ohne browserspezifische Features.

Der Android-Emulator enthält das Android SDK, das Sie als Teil von Android Studio herunterladen müssen. Befolgen Sie dann die Anweisungen, um ein virtuelles Gerät zu einrichten und den Emulator zu starten.
Nachdem Der Emulator gestartet wurde, wählen Sie das Symbol Browser aus, und testen Sie Ihre Website im alten Stock Browser für Android.

Chromium inhaltsshell unter Android

Um die Chromium Inhaltsshell für Android zu installieren, lassen Sie den Emulator ausgeführt, und führen Sie den folgenden Befehl 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 testen.

Firefox unter Android

Ähnlich wie bei Chromium Content Shell können Sie eine APK zum Installieren von Firefox auf dem Emulator erhalten.

Laden Sie die richtige .apk-Datei herunter.

Führen Sie den folgenden Befehl aus, um die Datei auf einem geöffneten Emulator oder verbundenen Android-Gerät zu installieren.

adb install <path_to_APK>/fennec-XX.X.XX.android-arm.apk

iOS-Simulator

Der iOS-Simulator für Mac OS X enthält Xcode, den Sie über die App-Store.

Wenn Sie fertig sind, erfahren Sie, wie Sie mit dem Simulator in der Apple Developer-Dokumentation arbeiten.

Hinweis

Um zu vermeiden, dass Xcode jedes Mal geöffnet werden muss, wenn Sie den iOS-Simulator verwenden möchten, öffnen Sie ihn, zeigen Sie auf das iOS-Simulator-Symbol in Ihrem Dock, öffnen Sie das Kontextmenü (klicken Sie mit der rechten Maustaste), und wählen Sie In Dockhalten aus. Wählen Sie jetzt einfach das Symbol aus, wann immer Sie es benötigen.

Microsoft Edge (EdgeHTML)

Moderner IE-VM

Microsoft Edge (EdgeHTML) Virtuelle Computer (VMs) ermöglichen Ihnen den Zugriff auf unterschiedliche Versionen von EdgeHTML und IE auf Ihrem Computer über VirtualBox (or VMWare). Wählen Sie auf der Downloadseite einen virtuellen Computer aus.

Cloudbasierte Emulatoren und Simulatoren

Wenn Sie die Emulatoren nicht verwenden können und keinen Zugriff auf echte Geräte haben, sind cloudbasierte Emulatoren das nächste Beste. Ein großer Vorteil cloudbasierter Emulatoren gegenüber echten Geräten und lokalen Emulatoren besteht in der Möglichkeit, Komponententests für Ihre Website auf verschiedenen Plattformen zu automatisieren.

  • [BrowserStack (kommerziell)][|::ref1::|] ist am einfachsten für manuelle Tests zu verwenden. Sie wählen ein Betriebssystem aus, wählen Die Browserversion und den Gerätetyp aus, wählen eine ZU durchsuchende URL aus, und es wird ein gehosteter virtueller Computer, mit dem Sie interagieren können, hochgedreht. Sie können auch mehrere Emulatoren auf demselben Bildschirm ausführen, sodass Sie das Aussehen und Gefühl Ihrer App auf mehreren Geräten gleichzeitig testen können.
  • Mit "SauceLabs" (kommerziell) können Sie Komponententests innerhalb eines Emulators ausführen. Dies kann sehr nützlich sein, um einen Fluss durch Ihre Website zu schreiben und die Videoaufzeichnung danach auf verschiedenen Geräten zu sehen. Sie können auch manuelle Tests mit Ihrer Website durchführen.
  • Device Anywhere (kommerziell) verwendet keine Emulatoren, sondern echte Geräte, die Sie remote steuern können. Dies ist sehr nützlich, wenn Sie ein Problem auf einem bestimmten Gerät reproduzieren müssen und den Fehler möglicherweise nicht mithilfe einer der Optionen in den vorherigen Anleitungen anzeigen.

Mit dem Microsoft Edge-Entwicklungstools-Team Kontakt aufnehmen

Verwenden Sie die folgenden Optionen, um die neuen Features und Änderungen im Beitrag, oder andere Themen, die mit Entwicklungstools zu tun hat, zu diskutieren.

  • Senden Sie Ihr Feedback über das Symbol Feedback senden, oder wählen Sie Alt+Shift+I (Windows, Linux) oder Option+Shift+I (macOS) in Entwicklungstools aus.
  • Tweet auf @EdgeDevTools.
  • Senden Sie einen Vorschlag an The Web We Want.
  • Verwenden Sie den folgenden Feedback-Abschnitt, um Fehler in diesem Artikel zu melden.

Das Symbol Feedback senden in den Microsoft Edge-Entwicklungstools

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden.
Die ursprüngliche Seite befindet sich hier und wird von Meggin Kearney (Tech Writer) und Paul Bakaus (Open Web Developer Advocate bei Google | Tools, Performance, Animation, UX).

Creative Commons License
Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.