Mit dem neuen Internet Explorer 11 in Windows 8.1 hat Microsoft den nach dem verwendeten Hotkey benannten F12 Developer Tools ebenfalls ein dringend nötiges und umfangreiches Update verpasst. Ich möchte euch in diesem Artikel kurz die wichtigsten Neuerungen in den einzelnen Tools vorstellen.
DOM Explorer
Der DOM Explorer zeigt live und ohne manuellem Refresh immer das, was auch im Browser zu gerade zu sehen ist, was die direkte Manipulation von Elementen via HTML und CSS ermöglicht. Folgende Features sind im IE11 neu enthalten:
- Der HTML & CSS Code beliebiger Objekte kann im Browser über das „Element untersuchen“ Kontextmenü direkt eingesehen werden.
- Die aus Visual Studio bekannte und beliebte IntelliSense Autovervollständigung unterstützt beim schreiben von HTML und CSS.
- DOM-Elemente können live via Drag-And-Drop im Dokument verschoben werden.
- Zeigt, welche Styles und Media Queries auf ein Element wirken.
Konsole
Die Konsole ist der zentrale Punkt in den F12 Tools, mit dem laufenden Code zu interagieren. Infos können über die Console Debugging API erhalten werden und über die Kommandozeile lassen sich Befehle übermitteln. Neu ist unter anderem:
- Die Konsole kann parallel zu allen anderen in den F12 Tools enthaltenen Werkzeugen angezeigt werden.
- IntelliSense Autovervollständigung für die Command Line
Debugger
Der Debugger ist der beste Freund des Programmierers. Hier sieht der Entwickler, was der Code wann, wie und warum macht. Die Ausführung des Codes kann pausiert, Schritt für Schritt fortgesetzt und dabei die verwendeten Variablen und Objekte im Blick behalten werden. Auch hier gibt es Neuerungen:
- Code kann debugged werden, ohne dass die Seite neu geladen werden muss.
- Mehrere Scripts werden in einer Tab-Ansicht dargestellt.
- Die Scrollbar zeigt Position von Breakpoints und Suchtreffern.
Netzwerk
Das Netzwerktool listet alle von der Webseite ausgehenden Netzwerkaufrufe auf. Dies ist gerade zum Debuggen von AJAX-Requests hilfreich. Hierbei ist neu:
- Verbesserte Anzeige der benötigten Zeiten
- Verbesserte Anzeige der Kompression
Reaktionsfähigkeit der Benutzeroberfläche
Dieses Tool gibt detaillierte Auskunft darüber, wie schnell die Homepage auf Benutzereingaben reagiert. Gerade bei der Entwicklung von Spielen mit HTML5 ist dies enorm wichtig und interessant. Dieses Werkzeug ist in den F12 Tools für IE11 brandneu und kommt unter anderem mit diesen Features:
- Auflistung verschiedener Ursachen für CPU-Aktivität, welche zu langsamen Reaktionszeiten führen
- Anzeige der aktuellen Framerate der Homepage
- Identifikation einzelner Szenarien auf dem Zeitstrahl durch Beschriftung
Profiler
Der Profiler ist ein Werkzeug, um die JavaScript-Performance zu messen. Folgende Funktionen sind neu hinzugekommen:
- Identifikation von Funktionen, die innerhalb von Web Worker ausgeführt wurden.
- Übersichtlicheres Design
Arbeitsspeicher
Dieses Tool gibt darüber Auskunft, wie die Homepage mit dem verfügbaren Arbeitsspeicher umgeht. So können relativ einfach Memory Leaks aufgespürt und behoben werden. Auch dieses Werkzeug ist neu und enthält unter anderem diese Funktionen:
- Timeline, die Bedarf an Arbeitsspeicher und dessen Veränderung über Zeit angibt
- Snapshot-Funktion, die detaillierte Informationen zu einem bestimmten Zeitpunkt liefert
- Vergleich verschiedener Snapshots
Emulation
Zu guter Letzt gibt es mit dem Emulation-Tool ein neues, wertvolles Werkzeug, um eine Webseite aus dem IE11 heraus auf verschiedenen Bildschirmgrößen und Auflösungen zu testen. Interessante Einstellungen können hierbei emuliert werden:
- Internet Explorer Version 6 – 11
- Mobile Geräte (Windows Phone 7 / 8, iPad & Safari)
- Simulation von GPS Daten
Fazit
Wie leicht zu erkennen ist liefert der Internet Explorer 11 neue, enorm spannende und hilfreiche Tools für Webentwickler. Für mich persönlich wird dies voraussichtlich in Zukunft Firebug weitestgehend ersetzten.
Weitere Infos zu den Tools findet ihr auch auf der entsprechenden MSDN Seite des Internet Explorer Dev Centers.
