Debugger und Toolbars

Während der AJAX-Entwicklung ist die Fehlerkontrolle ebenso wichtig wie der gezielte Blick auf das DOM oder einzelne Passagen des Quelltextes. Mittlerweile gibt es für die einzelnen Browser wahre Einzelkönner, dank derer man sich nicht mehrere Entwicklertools installieren muss, sondern alles aus einer Hand bekommt.

Firefox Web Developer Extension

Die Firefox Web Developer Extension ist eine Toolbar für den Firefox, die unglaublich viele Möglichkeiten bietet. Besonders interessant ist der integrierte DOM Inspector, auf den im weiteren Verlauf dieses Artikels noch gesondert eingegangen wird. Die Extension bietet neben dem DOM Inspector aber auch die Möglichkeit, CSS und XHTML auf Fehler hin zu überprüfen. Zusätzlich lässt sich die Fehlersuche auch auf bestimmte Bereiche begrenzen, sodass man sich beispielsweise nur JavaScript-Fehler anzeigen lassen kann. Weitere interessante Funktionen sind das Ein- und Ausblenden von Bildern sowie das so genannte Outlinen von Elementen.

IE Developer Toolbar

Mit der IE Developer Toolbar stellt Microsoft ein Produkt zur Verfügung, das die Arbeit von Webentwicklern, die sich dem Internet Explorer 6 oder 7 widmen, erheblich erleichtert. Vergleichbar ist die Toolbar mit der Firefox Web Developer Extension. Die IE Developer Toolbar ermöglicht es beispielsweise, einzelne Seitenbereiche auf Fehler hin zu überprüfen. Daneben sind folgende interessante Funktionen integriert:

• Bilder lassen sich ein- und ausblenden.
• Das so genannte Outlinen von Elementen ist möglich.
• CSS, HTML, RSS und WAI lassen sich direkt validieren.

Neben diesen allgemeinen Features ist für die AJAX-Entwicklung vor allem der DOM-Explorer interessant. Er erlaubt es, DOM-Inhalte auf Webseiten zu testen und zu verändern. Leider merkt man der Toolbar derzeit noch ihren Beta-Status an, was sich vor allem bei der Geschwindigkeit bemerkbar macht.

Firebug

Joe Hewitt stellt mit der von ihm geschaffenen Firefox-Erweiterung Firebug eine Kombination aus JavaScript-Konsole, DOM-Inspektor und Kommandozeilen-JavaScript-Interpreter zur Verfügung. Das gerade einmal 22 KB große Tool kann allerdings erst ab Firefox 1.5 eingesetzt werden. Firebug ist übrigens nicht auf den AJAX-Einsatz beschränkt, sondern kann auch für reine DHTML- und JavaScript-Applikationen genutzt werden. Nach der Installation lässt sich die Extension über ein kleines Icon in der Symbolleiste aufrufen, woraufhin sich im unteren Browserbereich eine Konsole öffnet. Hierüber kann man nun den ablaufenden Code kontrollieren und die einzelnen Bestandteile genauer untersuchen. Wichtigster Teil des Firebug ist der JavaScript-Debugger, dank dem man nach Erreichen eines bestimmten Breakpoints schrittweise den Code überprüfen kann. Dabei kann man sich mittels eines Inspektors die jeweiligen DOM-Objekte anzeigen lassen und (zumindest teilweise) bearbeiten. Interessant ist dabei vor allem die Möglichkeit, sich mit den Cursor-Tasten durch das DOM zu arbeiten, was einfach schneller geht, als wenn man auf die Maus zurückgreifen müsste. (Was man aber natürlich auch kann.) Einige Highlights, die die Extension zu bieten hat:

• Fehlerbehandlung: Es werden Java­Script-Fehler angezeigt, die von der Seite produziert werden. Die anzuzeigenden Fehlertypen lassen sich dabei übrigens konfigurieren. Klickt man einen Fehler in der Konsole an, wird die fehlerbehaftete Stelle in einem Code-Fenster angezeigt und markiert.
• Ajax Spy: Dadurch werden die XMLHttp­Request-Aufrufe angezeigt. So erkennt man, ob die Requests bei Benutzerinteraktion richtig abgesetzt wurden.
• Elemente gezielt ansprechen: Man kann einzelne Elemente inspizieren. Dazu wird innerhalb der Konsole die Schaltfläche Inspect Element gedrückt und das gewünschte Element markiert. Zu dem so selektierten Element können Sie sich nun die CSS-, XML- und JavaScript-Auszeichnungen anzeigen lassen.

Gerade die übersichtliche Anzeige und die Möglichkeit zur Bearbeitung des DOM machen Firebug zu einem fast unverzichtbaren Hilfsmittel bei der AJAX-Entwicklung. Auch für ältere Firefox-Versionen gibt es entsprechende Lösungen. So funktioniert Venkman, ein JavaScript-Debugger von Mozilla, beispielsweise nicht nur im Seamonkey, sondern auch in Firefox 0.9. bis 1.0.

Microsoft Script Debugger

Was Firebug für den Firefox, ist Microsoft Script Debugger für den Internet Explorer. Im Internet Explorer werden zwar Script-Fehler in einem Dialogfenster angezeigt (wenn man es denn eingestellt hat), aber nur wer sich den Script Debugger installiert, kann den Code Schritt für Schritt durchgehen und kontrollieren. Das Microsoft-Tool bietet unter anderem die folgenden Funktionen:

• Der Quellcode des Skripts lässt sich anzeigen.
• Durch die Definition von Haltepunkten kann das Skript schrittweise ausgeführt werden.
• Die Werte von Variablen und Eigenschaften lassen sich in einem eigenen Fenster anzeigen und sogar verändern.
• Das Programm bietet eine Übersicht des Funktion-Stacks und ein Kommando-Fenster.

Nach der Installation des Tools integriert es sich automatisch in den Internet Explorer. Sobald in einer Seite ein Fehler entdeckt wird, startet der Script Debugger.

View Rendered Source

Ein erstklassiges Tool, das jedoch leider ausschließlich für den Firefox entwickelt wurde, ist View Rendered Source. Hierüber kann man sich den Quelltext eines Dokuments farbig und übersichtlich formatiert anzeigen lassen. Besonderes Highlight dabei: vorhandener JavaScript-Code wird entfernt. Statt des reinen Codes wird dessen Ausgabe angezeigt. Die Anwendung selbst ist denkbar einfach. Nach dem Download und der Installation von View Rendered Source genügt ein Rechtsklick auf die gewünschte Webseite. Aus dem Kontextmenü wird anschließend View Rendered Source Chart gewählt.

DOM-Inspektoren

AJAX-Anwendungen ohne Kenntnisse des DOM zu erstellen, ist schier unmöglich. Wie aber arbeitet man am besten mit dem DOM? Ein normaler Blick in den Quelltext ist zwar möglich, ist allerdings zumeist nicht übersichtlich genug. Hier helfen DOM-Inspektoren weiter, durch die man sich die einzelnen Elemente der Seite gezielt anzeigen und oftmals sogar bearbeiten kann.

DOM Inspector

Der DOM Inspector ist ein Tool, mit dem man sich die einzelnen Bestandteile einer Webseite und der Benutzeroberfläche anzeigen lassen kann. Zusätzlich ist es möglich, die CSS-Eigenschaften anzuzeigen und zu bearbeiten. Für den AJAX-Einsatz sind aber vor allem die Funktionen interessant, die JavaScript betreffen. Wer bisher nur wenig oder gar keine Erfahrungen mit AJAX sammeln konnte, für den ist die Möglichkeit interessant, einen Blick auf das DOM-Modell der entsprechenden Anwendung zu werfen. Um den DOM Inspector nutzen zu können, muss während der Installation des Browsers anstelle von Standard die Variante BENUTZERDEFINIERT gewählt werden. Dort muss man bei dem Schritt Komponenten auswählen den Eintrag Developer Tools aktivieren. Aufrufen lässt sich der DOM-Inspector anschließend über EXTRAS | DOM INSPECTOR. In den Standardeinstellungen zeigt der DOM Inspector die DOM-Knoten, in der linken Fensterhälfte die des aufgerufenen Dokuments und rechts die des ausgewählten Elements.

IEDocMon

Auch für den Internet Explorer gibt es (nicht nur) einen DOM-Inspektor. Mit IEDocMon kann man sich das DOM im Microsoft-Browser anzeigen lassen. Das Tool ist quasi das Äquivalent zum zuvor gezeigten DOM Inspector. Auch mit IEDocMon lassen sich unter anderem die Elemente und Events von (insbesondere natürlich dynamischen) Webseiten anzeigen. Die Installation ist denkbar einfach. Laden Sie sich die setup.exe herunter und leiten Sie darüber die Installation ein. Nach einem Neustart des Internet Explorers kann das Tool über ANSICHT | EXPLORER-LEISTE | IEDOCMON aufgerufen werden. IEDocMon wird daraufhin im unteren Fensterbereich angezeigt und man hat Zugriff auf die einzelnen Elemente.