IE-Debugging via VirtualBox mit modern.ie

Alltag für Webentwickler dürfte das Testen der Webseiten im Internet Explorer sein. Wo hingegen bei Firefox oder Chrome es einen kürzeren Releasezyklus gibt, wurde der IE in den letzten Jahren sehr selten erneuert. Das Problem ist (wie beim Safari) dass das Browser-Upgrade ans Betriebssystem geknüpft ist. Hinderlich ist es auch, das man nicht mehrere IE-Versionen parallel installieren kann. Früher™ hatte man sich mit IETester beholfen um gleichzeitig mehrere IEs zu testen. Bereits seit IE8 kann man das Rendering in den IE-Developer-Tools umstellen und die Seite in einer älteren IE-Version gerendert betrachten. Das reicht auch oft für den ersten Eindruck, ist aber nicht so verlässlich wie eine isolierte Version von Browser und Betriebssystem. Zudem kann man am Mac keinen IE installieren. Im Netz gibt es zwar einige Tools wie IE NetRenderer, die Screenshots von IE-Versionen generieren. Das hilft aber nicht weiter wenn man einen Darstellungsfehler entdeckt, Debugging ist natürlich nicht möglich.

Internet Explorer via VirtualBox oder VMware Fusion

Um sicher zu testen, sollte man auf virtuelle Maschinen zurück greifen. Prominente Tools sind VMware Fusion, Parallels Desktop oder VirtualBox. In VirtualBox kann man aber nicht nur Windows und IE installieren, sondern auch andere Systeme abbilden. VirtualBox wird aktuell sehr häufig mit Vagrant genutzt um z.B. eine Live-Server-Umgebung abzubilden.

Seit einiger Zeit gibt es eine Initiative von Microsoft um das Testen von Webseiten auf verschieden Internet Explorer zu erleichtern – modern.ie. Mit dem Online-Tool kann man eine bestehende Seite im Netz überprüfen, ob z.B. die Möglichkeiten für Windows 8 ausgeschöpft werden ob proprietäre CSS-Eigenschaften verwendet werden. Zudem bietet Microsoft dedizierte virtuelle Maschinen für das lokale Testen zum Herunterladen an. Über modern.ie bekommt man zudem eine 3-monatige Testphase für Browserstack.

Testen mit Browserstack
Browserstack ist ein Service, mit dem man nicht nur die IEs, sondern auch eine Vielzahl mobiler Devices testen kann. Browserstack stellt virtuelle Maschinen oder Emulatoren zur Verfügung auf denen man dann via Tunnel eine Webseite debuggen kann und besitzt zudem eine REST API zum automatisierten Testen. Codepen-Snippets können ebenfalls „on-the-fly“ via Browserstack getestet werden.

Internet Explorer als virtuelle Maschine mit VirtualBox installieren

Ich benutze schon seit einiger Zeit VirtualBox und spezielle virtuelle Maschinen für das lokale Testen von IE8 & Co. Bei der Installation der Boxen half mir ein Shell-Script von ievms. Beim Installieren kann man zudem angeben welche Versionen vom IE man installieren möchte, oder einfach alle verfügbaren Versionen installieren (IE6-IE11).

1. Aktuelle Version von VirtualBox herunterladen:
   https://www.virtualbox.org/wiki/Downloads

2. ievms über die Konsole via Shell-Script installieren

   curl -s https://raw.githubusercontent.com/xdissent/ievms/master/ievms.sh bash
   

3. oder: spezielle IE-Versionen installieren (IE8 – IE10)

   
   curl -s https://raw.githubusercontent.com/xdissent/ievms/master/ievms.sh | env IEVMS_VERSIONS="8 9 10" bash
   

4. Warten
   Das dauert je nach Verbindungsgeschwindigkeit und Rechnerleistung einige Zeit (bis zu mehreren Stunden) – am besten vielleicht nachts laufen lassen und sicher stellen, dass die Internetverbindung stabil ist und der Rechner nicht in den Ruhemodus geht. ;)

IE VMs auf externem Speichermedium (SD-Card) installieren

Bei der Installation von IE VMs werden sehr große Dateien im System hinterlegt (ist ja immer ein komplettes Windows-Betriebssystem mit Browser). Das kann natürlich den verfügbaren Speicherplatz einer Festplatte sehr stark dezimieren, besonders wenn man nur eine kleine SSD hat.

Da ich die VMs zwar sehr gern verwende, aber nicht mehr allzu häufig brauche und sie mir die Festplatte ein wenig zumüllen, habe ich mir die VMs auf einer externen Quelle installiert. Ich habe mir eine 64Gb Micro-SD-Karte und einen kleinen SD-Karten-Adapter zugelegt, da ich den SD-Karten-Slot am MacBook Air selten brauche.

Bei der Installation über ievms muss dann ein anderer Pfad angegeben werden um die virtuelle Maschine auf der SD-Karte zu speichern. Das Script anwerfen und Kaffee trinken gehen oder so. Das Installieren dauert eine Weile, da extern speichern bekanntermaßen noch langsamer als intern speichern ist.

curl -s https://raw.githubusercontent.com/xdissent/ievms/master/ievms.sh | env IEVMS_VERSIONS="7" INSTALL_PATH="/Volumes/SanDisk64/.ievms" bash

Installationspfad anpassen: „/Volumes/[YOUR_SDCARD_NAME]“

Das ievms Shell-Script erstellt automatisch einen Sicherungspunkt, zu dem man nach Ablauf der 90-Tage-Windows-Testphase zurückkehren kann und die VMs nicht erneut herunterladen und installieren muss. Bis dahin kann man Windows völlig kostenlos nutzen.

Wenn alles installiert ist, kann man die Maschinen starten (eine nach der anderen) und weitere Einstellungen machen. Die Maschinen werden per default mit englischer Tastatur installiert. Ich stelle diese immer auf deutsch um und erstelle dann nochmal einen Snapshot (Sicherungspunkt).