Kategorien
(Kostenlose) Services Essentials Inspiration Tutorials Webdesign

So testest du Internet Explorer mit EdgeHTML auf Android, iOS und Mac OS X

Vor ein paar Monaten hat das Team von Microsoft ein neues Tool an den Start gebracht, mit dem es spielend leicht ist, Webseiten mit dem Internet Explorer zu testen, unabhängig davon auf welcher Plattform er läuft. Das klingt erstmal überraschend, ist aber tatsächlich Teil der Entwicklung von Microsoft Edge (vormals „Project Spartan“) mit seiner neuen Rendering Engine und dem neuen User-Agent String, einer Abspaltung der HTML Rendering Engine Trident, die weitaus kompatibler mit dem mobilen Web ist.

testinternetexplorer-teaser_DE

In diesem Tutorial zeige ich, wie das Ganze mit Chrome auf meinem MacBook funktioniert und wie man es einrichtet.

Gerade keine Zeit zum Lesen? Dann sind hier erstmal ein paar Vine-Videos für den ersten Eindruck:

Das Tool heißt Remote und stellt eine virtuelle Version des neuesten Internet Explorers zur Verfügung. Dadurch kann man den aktuellen IE testen, ohne selbst eine virtuelle Maschine installiert zu haben. Die neuste Rendering-Engine EdgeHTML ist natürlich integriert. Und wer frühere IE-Versionen testen will, der kann schließlich die kostenlosen virtuellen Maschinen auf modern.IE nutzen. Hier sind sie zu finden.

Von Anfang an

Ich bin alles Schritt für Schritt durchgegangen, da ich das Tool auch selbst nutzen wollte. Gleichzeitig habe ich es dokumentiert – für alle, die Fragen oder Probleme beim Aufsetzen haben sollten.

Wir starten auf remote.modern.ie. Das bringt uns dorthin:

mainpage

Um den Dienst nutzen zu können, benötigt man ein Microsoft-Konto. Die Anwendung wird dann diesem Konto zugeordnet.

perms-2

Wer bereits einen Account für Live.com oder Outlook.com hat, kann diesen benutzen – oder einfach einen neuen eröffnen. Nebenbei: Auch mit einem Account muss natürlich keiner die genannten Dienste nutzen. Aber es lohnt sich andererseits wirklich mal zu schauen, was diese inzwischen alles bieten.

Als nächstes wählen wir den nächstgelegenen Server aus, schließlich wollen wir eine optimale Performance:

location-3

An dieser Stelle werden wir aufgefordert, die Microsoft Remote Desktop App für die von uns bevorzugte Plattform herunterzuladen. Im Einzelnen sind das:

  • Mac OS X
  • iPhone oder iPad
  • Android
  • Windows x86 oder x64
  • Windows RT

download-4

Ich habe wohl nicht zu viel versprochen, als ich von einer wirklich plattformübergreifenden Anwendung sprach. Mac-User können die App im Mac App Store laden. Der “Mac”-Link führt direkt zur Seite des Mac App Stores.

applecom-5

Jetzt auf den “View in Mac App Store” Button klicken, um den App Store auf dem Mac zu öffnen. Es folgt eine Bestätigungsnachricht von Chrome (oder einem anderen OS X Browser), mit dem die externe App gestartet werden kann:

launchappstore-6

Nach der Bestätigung öffnet sich der App Store:

appstore-7

Da ich die App bereits installiert habe, erscheint bei mir der Button “Open”. Wer sie noch nicht installiert hat, kann das jetzt tun. Danach die App im Finder anzeigen lassen:

finder-8

Man kann auch, so wie ich, den wunderbaren Alfred suchen lassen:

alfred-9

Der nächste Schritt ist der Hauptgrund für dieses Tutorial. Denn auch, wenn man Remote Desktop zum Laufen bringt, ist nicht sofort klar, was als nächstes zu tun ist. Nach dem Starten der App ist im Header deutlich “Microsoft RemoteApp“ zu erkennen. Da klicken wir jetzt einfach mal drauf:

msremoteapp-10

Nun werden deine Microsoft-Konto-Informationen abgefragt, um zu bestimmen, welche App-Abos für dich verfügbar sind:

msremoteappemail-11

msremoteappsignin-12

msremoteappsubs-13

Nun da der Account erkannt wurde, erscheint ein Dialog mit den verfügbaren App-Abos:

msremoteappinvite-14

Ich weiß, dass es da durchaus mal zu Verwirrung kommen kann. Die UX ist an dieser Stelle nicht in jedem Fall selbsterklärend. Aber dafür gibt es dieses Tutorial. Wenn man das Feld “Internet Explorer (email: iewebeco@microsoft.com)” anklickt, erscheint der Eintrag “Internet Explorer->IE Technical Preview”. Dieser wird der primären Microsoft Remote Desktop App hinzugefügt, ABER leider verschwindet der eben genannte Dialog nicht. Wie hier zu sehen ist:

msremoteappiechk-15

Achtung, also. Sobald der Eintrag “IE Technical Preview” in der primären App sichtbar ist, kann die Dialog-Box geschlossen werden. Im vorherigen Bild habe ich das Close-Icon hervorgehoben, um alle Unsicherheiten auszuschließen.

So, das war’s auch schon fast. Es folgt ein Doppelklick auf “IE Technical Preview” und schon wird die virtuelle Version des IE gestartet. Ein bisschen Geduld ist hier erforderlich, bis alle Systeme laufen:

msremoteappconnect-16

Dann jedoch steht die vollständige Version des IE Technical Preview bereit. Im folgenden Bild sind die F12 Developer Tools deutlich zu erkennen:

ieonosx-17

Noch mehr Testwerkzeuge

Das hier beschriebene Tool ist ein sehr hilfreiches Werkzeug, welches das Testen des aktuellen IE mit EdgeHTML definitiv erleichtert. Es gibt jedoch einige Einschränkungen. So ist es zum Beispiel nicht möglich, auf das lokale Dateisystem zuzugreifen. Es wäre natürlich toll, wenn es funktionieren würde, aber Virtual Machines sind knifflige Anwendungen, besonders in Sachen Sicherheit.

Hier sind weitere kostenlose Tools, mit denen du Anwendungen für den IE testen kannst:

Für weitere Details lohnt sich ein Blick in die Remote.IE-Ankündigung auf dem IE-Blog. Und jetzt, da mithilfe dieses Tutorials die Anwendung sicher ordentlich läuft, freue ich mich natürlich über Feedback, ob das Testen dadurch einfacher und schneller geht.

Dieser Artikel ist Teil der Web Dev Tech Series von Microsoft. Wir freuen uns, Microsoft Edge (früher bekannt als Projekt Spartan) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ modern.IE.