Die Internet Explorer 9 Beta bringt auch eine Aktualisierung der Developer Tools mit. Diese Tools richten sich an alle Webentwickler und –designer die eine Webseite im Browser Sourcecode technisch betrachten und analysieren möchten. Debugging, Tracing und Profiling ermöglichen schnelle Analysen und Fehlerbehebungen. Wer die Developer Tools bisher nie in Aktion gesehen hat, kann einfach mal die Taste F12 drücken.

Die Möglichkeiten die man mit den Developer Tools im IE9 hat, habe ich in einem kurzen Screencast aufgezeichnet.

Get Microsoft Silverlight

Wer keine Zeit hat sich das 25 Minütige Video anzuschauen, kann auch meine persönlichen 3 Lieblingsfunktionen nachlesen.

Trace Styles

Mit Hilfe der Trace Styles Funktionalität im HTML Reiter, lässt sich schnell das aktuell angewendete CSS auf ein HTML Element erkennen. Dazu selektiert man mittels CTRL + B die entsprechende Sektion im HTML und erhält dann das Ergebnis, wie im folgenden Screenshot

trace-styles-im--ie9

Eine schöne zusammenfassende Übersicht der angewendeten Attribute im CSS.

Script Console und Debugger

Im Script Reiter findet man einen kompletten Script Debugger und eine Console zum manipulieren von Elementen. Eine – quasi – kleine Entwicklungsumgebung im Browser, man erstellt einen Breakpunkt im Script der Wahl, startet dann mittels “Start debugging” und wartet auf den Breakpoint Aufruf. Schon hat man die momentenen Variablen, den Stacktrace und Watch Variablen im Zugriff. Diese kann man dann über den Console Input ändern und weiter ausführen lassen. Hier zwei Screenshots vor und während der Ausführung:

breakpoint-im-ie9

breakpoint-hit-im-ie9

Network & Profiling

Mit Hilfe des Network & Profiler Reiters lässt sich das gesamte Lade- und Ausführungsverhalten einer Webseite analysieren. Mit dem Profiler sieht man die einzelnen Aufrufe in der Script Engine. Engpässe können gefunden werden, man erhält Informationen wieviele Millisekunden die einzelnen Script-Blöcke benötigt haben und welche Methoden vielleicht ein Problem darstellen.

Im Network Trace sieht man die gesamte Webseite mitsamt des Ladeverhaltens von zusätzlichen Inhalten. Bei meinem Blog lässt der folgende Screenshot schon erahnen das vieles nicht optimal ist. Bilder werden relative langsam nachgeladen, viele eingebundene CSS Dateien und Skripte sorgen für einen trägen Aufbau.

network-trace-ie9

network-trace-detail-ie9

Fazit

Mit der Internet Explorer 9 Beta sind auch die Developer Tools aktualisiert worden. Diese bieten jedem Webdesigner und –entwickler einen echten Mehrwert im täglichen Umgang mit HTML und JavaScript. Durch die Möglichkeiten der Netzlast-Analyse und dem Profiling der Script Ausführung lassen sich nun auch versteckte Probleme aufdecken, die bislang nicht so einfach zu finden waren.

DotNetKicks-DE Image