Microsoft Edge ist der neue Standardbrowser in Windows 10. Mit seiner neuen Rendering Engine (EdgeHTML) und vielen interessanten Funktionen für den Nutzer ist Edge ein Browser für das moderne Web. Wer mehr zu Microsoft Edge erfahren möchte, dem empfehle ich diesen TechTalk, den ich gemeinsam mit meinem Kollegen Daniel Meixner aufgenommen habe.
Durch die Möglichkeiten für viele Windows 8/8.1- und Windows 7-Nutzer, kostenfrei auf Windows 10 zu aktualisieren, wird sich Microsoft Edge schnell verbreiten und spielt daher für Webentwickler eine immer wichtigere Rolle. Aus diesem Grund sollte die eigenen Website auch auf dem neuen Browser getestet werden, insbesondere, wenn noch auf veraltete Technologien wie Browser-Weichen über den User Agent oder Plug-Ins zurückgegriffen wird. In Zukunft sollte also Microsoft Edge ein fester Bestandteil der Testmatrix sein. Doch wie kann man Websites für den Windows 10-Browser testen, wenn man kein Windows 10-System zur Verfügung hat? Im Folgenden möchte ich die Werkzeuge vorstellen, die Microsoft dafür bereitstellt.
Wer sich lieber ein Video anschaut anstatt zu lesen: Fast alle der folgenden Punkte habe ich auch in dem folgenden Video auf Channel 9 zusammengefasst:
Video: Testen der eigenen Website für Microsoft Edge von Mac, Linux und Windows
Testen für Microsoft Edge
Das Wichtigste vorab: Wer heute schon auf moderne Web Standards zurückgreift und auf Browser-spezifische Funktionalitäten verzichtet, dessen Website wird mit sehr großer Wahrscheinlichkeit bereits jetzt ohne Probleme mit Microsoft Edge funktionieren.
Für eine Kompatibilität mit Microsoft Edge sollten möglichst viele der folgenden Fragen mit “Ja” beantwortet werden können:
- Verzichte ich auf die Verwendung von veralteten Document Modes? Nutzung von <!DOCTYPE html> und Verzicht auf x-ua-compatible im Header der Seite
- Wird unterschiedlichen modernen Browsern das gleiche Markup ausgeliefert? Verzicht auf Browser-Weichen
- Wie andere moderne Browser bringt Microsoft Edge Unterstützung für Flash und PDF mit. Andere Plug-Ins werden nicht unterstützt. Viele Plug-Ins sind durch moderne Web Standards nicht mehr zeitgemäß. Verzichte ich auf veraltete Plug-Ins?
- Sind alle JavaScript Libraries aktuell? Veraltete JavaScript Libraries können Sicherheitsrisiken, Browser-Weichen und fehlende Unterstützung für z.B. Touch Events mit sich bringen.
- Verzichte ich auf User Agent Sniffing zum Zweck der Browser-Erkennung? Browser Detection statt Feature Dectection kann dazu führen, dass Nutzer neuer Browser/Browser-Versionen nicht korrekt erkannt werden und daher nicht alle Funktionen der Website nutzen können. Hier sollte auf Feature Detection umgestellt werden.
- Verzichte ich auf herstellerspezifische CSS Prefixes oder gebe ich zumindest immer auch die herstellerneutrale Variante an? Die Nutzung von speziellen CSS Prefixes, ohne die Angabe einer Alternative, kann die Darstellung der Seite für Nutzer anderer Browser erheblich verschlechtern.
Diese Fragen lassen sich mit den richtigen Werkzeugen schnell beantworten.
Site Scan
Unter http://dev.modern.ie/tools/staticscan/ steht ein kostenfreier Site Scan zur Verfügung, welcher die eigene Website auf die oben genannten Punkte untersucht und ggf. Verbesserungsvorschläge liefert. Umso besser eine Seite in diesem Test abschneidet, umso besser ist auch die Kompatibilität mit Edge und anderen modernen Browsern.
Die wichtigsten Bereiche sind dabei die oben angesprochenen Punkte, beim Site Scan unter “Modern web interoperability” zu finden. Wer weitere Verbesserungen wie Responsive Design oder eine optimale User Experience unter Windows umsetzen möchte, kann zudem bei den unteren Punkten tiefer einsteigen.
Ein typischer Testbericht gibt einem einen guten Einblick in die kritischen Punkte und liefert Hinweise und Links zur Verbesserung der eigenen Seite. Hier als Beispiel die Details zu CC Prefixes:
Virtuelle Maschinen mit Microsoft Edge
Viele Entwickler haben aktuell noch nicht die Möglichkeit auf ein Windows 10-System mit Microsoft Edge für Testzwecke zurückzugreifen. Aus diesem Grund stehen über http://dev.modern.ie/tools/vms/ virtuelle Maschinen (VMs) für Linux-, Mac- und Windows-Host-Systeme zur Verfügung. Je nach System sind die VMs für die Nutzung mit Hyper-V, VirtualBox, VMware oder Parallels ausgerichtet.
Die für einen Test mit Microsoft Edge relevante VM ist “Microsoft Edge on Win10”, es stehen jedoch für den Unternehmenseinsatz auch VMs mit älteren Windows-Versionen und den Internet Explorer-Ausgaben von Version 6 bis 11 bereit.
Nach dem Download der VM (ca. 4 GB), muss diese noch mit dem gewählten Virtualisierungstool gestartet werden. Der Login für die Windows 10 VM mit Edge lautet “IEUser” (User) und als Passwort “Passw0rd!” – jeweils ohne “”.
In der virtuellen Maschine kann Microsoft Edge nun für Tests der eigenen Seite verwendet werden. Hierfür stehen, neben dem Browser, natürlich auch die neuen F12-Entwicklertools von Microsoft Edge zur Verfügung. Mit diesen kann nicht nur zwischen dem Windows 10- und Windows 10 Mobile-Modus gewechselt werden, sondern auch die eigene Seite zu Testzwecken mit unterschiedlichen User Agents aufgerufen werden.
Fernzugriff auf einen Internet Explorer mit Edge Rendering Engine über RemoteIE
Da nicht für jeden Entwickler und jede Hardware der Download und Betrieb einer vollständigen virtuellen Maschine geeignet ist, besteht unter https://remote.modern.ie/ die Möglichkeit, über Azure Remote App kostenfrei auf eine angepasste Form des Internet Explorer 11 mit EdgeHTML Rendering Engine (statt Trident / MSHtml) zurückzugreifen.
Den Azure Remote App Client gibt es für Mac, iOS, Android, Windows Phone und Windows zum Download. Über diesen Client kann dann direkt, ohne Download einer vollständigen VM, auf einen Browser mit der neuen Rendering Engine zurückgegriffen werden.
Wie ein Check des User Agent Strings zeigt, identifiziert sich dieser Browser, trotz Internet Explorer-Optik, mit dem gleichen User Agent String wie Microsoft Edge und nutzt die gleiche Rendering Engine.
Dieser Browser kann somit zum Test der eigenen Website für Microsoft Edge verwendet werden. Dies ist ein wichtiger Unterschied zum “regulären” Internet Explorer 11 unter Windows 10, welcher weiterhin aus Kompatibilitätsgründen zur Verfügung steht und die bisherige Trident Engine nutzt.
Zusammenfassung und weitere Ressourcen
Wie dieser Artikel gezeigt hat, können dank der Werkzeuge auf dev.modern.ie neben einem Windows 10-System mit Edge diverse weitere Tests der eigenen Website für Microsoft Edge verwendet werden. Hiermit sollte einem Test, auch von Mac- und Linux-Systemen, nichts mehr im Weg stehen.
Hier noch ein paar weitere Informationen zum Test für Microsoft Edge:
- Microsoft Edge unterstützt auch WebDriver zum automatisierten Test von Websites. Das entsprechende Tool steht hier zum Download bereit. Die möglichen WebDriver-Kommandos findet man im Bereich Platform Status auf der Edge Developer Site. Dieser Blogeintrag geht näher auf die Verwendung von WebDriver ein.
- Um die Unterstützung für einzelne Funktionen in Microsoft Edge (und anderen Browsern) zu prüfen, gibt es unter http://dev.modern.ie/platform/status/ eine Übersicht mit Suchfunktion.
- Neben den Entwickler-Ressourcen unter http://dev.modern.ie gibt es Community-Unterstützung bei stackoverflow. Auch Microsoft-Mitarbeiter (unter anderem aus der Edge-Produktgruppe) sind dort aktiv.
- Auf GitHub findet sich zudem ein Tutorial zum Edge Mode und dem Thema Feature Detection.
Ich hoffe, ich konnte mit diesem Artikel einen guten Überblick über die Möglichkeiten für den Test der eigenen Website für Microsoft Edge geben. Bei Fragen und Anregungen stehe ich gerne über die Kommentare oder Kontaktmöglichkeiten zur Verfügung.
Links:
- TechTalk zu Microsoft Edge: https://channel9.msdn.com/Blogs/TechTalk/Episode-34-Microsoft-Edge-fr-Developer
- Video: Testen der eigenen Website für Microsoft Edge: https://channel9.msdn.com/Blogs/malte_lantin/Testen-der-eigenen-Website-fr-Microsoft-Edge-auf-Mac-Linux-und-Windows
- Edge Developer-Ressourcen: http://dev.modern.ie/
- Code Scan: http://dev.modern.ie/tools/staticscan/
- Virtuelle Maschinen mit Microsoft Edge: http://dev.modern.ie/tools/vms/
- RemoteIE mit EdgeHTML Engine: https://remote.modern.ie/
- Microsoft WebDriver Download: http://www.microsoft.com/en-us/download/details.aspx?id=48212
- WebDriver Status: http://dev.modern.ie/platform/status/webdriver/details/
- Blogpost zu WebDriver Support in Edge: http://blogs.windows.com/msedgedev/2015/07/23/bringing-automated-testing-to-microsoft-edge-through-webdriver
- Edge Platform Status: http://dev.modern.ie/platform/status/
- Stackoverflow Forum zu Edge: http://stackoverflow.com/questions/tagged/microsoft-edge
- EdgeMode and Feature Detection: https://github.com/deltakosh/interoperable-web-development/tree/master/edge-mode-and-feature-detection
Zum Autor
Malte Lantin beschäftigt sich als Technical Evangelist bei Microsoft Deutschland in erster Linie mit Webtechnologien und der Cloud-Plattform Microsoft Azure. In seiner Rolle verantwortet er zudem das Microsoft-Förderprogramm für technische Studierende „Microsoft Student Partners“. Seit mehreren Jahren ist er nun als Sprecher auf Entwicklerkonferenzen und als Trainer für Microsoft-Technologien aktiv. Nach seinem Studium der Wirtschaftsinformatik war er seit Januar 2010 zunächst als Product Manager für Microsoft Azure und dann als Audience Marketing Manager für die technische Ansprache von Entwicklern und IT-Professionals verantwortlich.
Malte Lantin beschäftigt sich als Technical Evangelist bei Microsoft Deutschland in erster Linie mit Webtechnologien und der Cloud-Plattform Microsoft Azure. In seiner Rolle verantwortet er zudem das Microsoft-Förderprogramm für technische Studierende „Microsoft Student Partners“. Seit mehreren Jahren ist er nun als Sprecher auf Entwicklerkonferenzen und als Trainer für Microsoft-Technologien aktiv. Nach seinem Studium der Wirtschaftsinformatik war er seit Januar 2010 zunächst als Product Manager für Microsoft Azure und dann als Audience Marketing Manager für die technische Ansprache von Entwicklern und IT-Professionals verantwortlich.
