Teil 3: Check: Internet Explorer 8 Developer Tools: Nützlich für SEO und gegen Spam

Wo sich der Aufwand für die Umstellung auf die neue Version als zu groß erweist, da schalten Sie den Browser mit

in den Kompatibilitätsmodus. Tipp: Für Tests in älteren Versionen des IE verwenden Sie den IE-Tester ().

Javascript debuggen

Bisher war das Entwickeln von Javascript mit dem Internet Explorer eine echte Qual. Um sinnvoll arbeiten zu können, musste man Javascript für alle Fenster aktivieren, was der Microsoft-Browser prompt mit schlechter Performance bestrafte. Obendrein wurde man auch beim Surfen auf Seiten, an denen man nicht gerade arbeitete, mit Debug-Hinweisen aller Art eingedeckt.

IE 8 schafft diese Mängel ab. Die Entwickler des neuen Debugging-Werkzeugs haben zwar erkennbar bei Firebug gespickt. Doch insgesamt bietet der Internet Explorer derzeit das übersichtlichere Debugging-Tool, auch weil die neue Konsole direkt integriert wurde und nicht in einem eigenen Fenster ruht. Einfache Statements können Sie hier einfach eintippen und testen, ohne den Umweg über den Quelltext einer Website.

Zwar können Sie auch im jüngsten Microsoft-Browser weiterhin Debugging pauschal aktivieren (unter Extras / Internetoptionen / Erweitert / Browsen). Im Prinzip reicht es aber, wenn Sie die DT öffnen und das gewünschte Skript im Ausklappmenü rechts oben im Inhaltsbereich des Skript-Tabs auswählen. Dann klicken Sie auf Debuggen starten. So wird der Debugger nur für das aktuelle Tab aktiv. Vorher sollten Sie gegebenenfalls per DT vorgenommene Änderungen am HTML und CSS sichern, denn der Debugger lädt als Erstes die aktuelle Seite neu.

Abbruch auf Kommando

Der Javascript-Debugger hält das Skript automatisch an, wenn er auf einen Fehler stößt. Diese Reaktion können Sie unterbinden, indem Sie auf das Pause-Symbol mit dem roten X klicken.

Als Entwickler möchte man zuweilen selbst bestimmen, an welchen Stellen ein Skript angehalten werden soll. Dafür geben Ihnen die DT die Breakpoint-Funktion an die Hand. Markieren Sie beliebige Zeilen eines Skripts als Breakpoint, in dem Sie sie links von der Zeilennummer anklicken. Markierte Zeilen erkennen Sie an einem roten Punkt.

Erreicht der Debugger einen Breakpoint, dann stoppt er das Skript automatisch am Ende der vorherigen Zeile. Im Eigenschaftenbereich finden Sie jetzt unter Lokale Variablen eine Aufstellung aller zum Skript gehörenden Variablen und deren Werte. Das ist aber ziemlich unübersichtlich. Besser ist es, wenn Sie vor dem Start des Debuggers die entscheidenden Variablen im Code mit der rechten Maustaste anklicken und auf Überwachung hinzufügen gehen. So ausgewählte Variablen erscheinen im Tab Überwachen. Nutzen Sie die Konsole, um Variablen beim Erreichen eines Breakpoints zu manipulieren.

Javascript-Tuning

Internet Explorer 8 hat zwar in vielen Disziplinen auf die Konkurrenz aufgeschlossen, aber bei der Ausführung von Javascript hinkt er Firefox, Safari und Chrome in Sachen Geschwindigkeit hinterher. Mit dem Profiler findet sich in den DT aber immerhin eine Funktion, die Ihnen verrät, welche Funktion wie viel Zeit benötigt und so Optimierungs-Ansätze aufzeigt.

Bedient wird der Profiler nach einem einfachen Prinzip. Sie laden die zu testende Seite und starten den Profiler mit einem Klick auf Profilerstellung starten. Dann führen Sie die gewünschten Aktionen aus und klicken den Knopf anschließend erneut an. Nach kurzer Wartezeit erscheint eine Tabelle, die alle aufgerufenen Funktionen, die von diesen verbrauchte Zeit und andere Angaben enthält. Übersichtlicher wird diese Aufstellung, wenn Sie die Ansicht auf Aufrufstruktur umstellen. Mit einem Doppelklick auf einen Eintrag springen Sie direkt zum Quellcode.

zm_timkaufmann