DOM-Inspector: Alle Bestandteile einer Website anzeigen
Ein wichtiges Tool liefert Firefox bei der Installation gleich mit, Sie müssen es nur bei der Installation explizit auswählen, indem Sie es als Option unter „Installationsart benutzerdefiniert“ mitinstallieren. Die Rede ist vom DOM-Inspector. Falls Sie Firefox standardmäßig ohne DOM-Inspector auf Ihren Rechner aufgespielt haben, können Sie das problemlos nachholen, indem Sie Firefox noch einmal drüber installieren – nur diesmal eben benutzerdefiniert.
Mit dem DOM-Inspector (DOM steht für Document Object Model, das die Struktur einer Website beschreibt) können Sie die Struktur und die Bestandteile einer in Firefox geladenen Webseite mit all ihren HTML-, CSS- und Script-Bestandteilen sowie deren Methoden und Eigenschaften in einem neuen Fenster baumartig anzeigen lassen und damit leichter analysieren. Im Rahmen des DOM-Modells kann man beispielsweise mit Javascript auf die Bestandteile einer Website zugreifen. Links in der Baumansicht suchen Sie das Sie interessierende Element (den so genannten Knoten) aus, rechts werden dann dessen Daten angezeigt. In der Browser-Ansicht können Sie die einzelnen Bestandteile einer Website hervorheben um sie leichter aufspüren zu können. Leere Textknoten („#text") lassen sich ausblenden um die Darstellung übersichtlicher zu machen: Nehmen Sie dazu im DOM-Menü „Ansicht, Leere Textknoten anzeigen“ das Häkchen weg. Alle mit einem „+“ gekennzeichneten Knoten lassen sich per Mausklick öffnen und anzeigen. Praktisch ist die Suchfunktion, mit der Sie gezielt nach bestimmten Knoten suchen können.
Für den DOM-Inspector hält Mozilla übrigens noch eine Reihe ergänzender Addons bereit. Eine solche Ergänzung ist beispielsweise Event Spy für Javascripts (Firefox: 1.0 – 3.1b2pre).
Debugger Venkman: Programmierfehler im Code aufspüren
Javascriptfehler zeigt zwar auch die Javascript-/Fehler-Konsole im Menü „Extras“ des Browser an (alternativ können Sie bei Firefox auch „javascript:“ in die Adresszeile eingeben). Doch besonders leistungsfähig ist diese Konsole nicht. Ein richtiger Debugger für Javascript ist dagegen Venkman. Er wird unter „Extras, Add-ons“ mit der Bezeichnung „Javascript-Debugger“ aufgeführt.
Zuerst laden Sie die Seite mit dem zu prüfenden Javascriptcode in Firefox, dann starten Sie Venkman. In der Regel sollte das reibungslos klappen, gelegentlich kann es zu Abstürzen kommen, manchmal ließ sich Venkman mit einer bestimmten Seite nicht sofort starten. In diesem Fall müssen Sie Firefox beenden - gegebenenfalls sogar über den Taskmanager von Windows. Danach starten Sie Firefox wieder, öffnen die betreffende Webseite und starten dann Venkman.
Links in Venkman werden die Seitenbestandteile angezeigt, mit einem Doppelklick auf eine dieser Dateien wird deren Code rechts angezeigt. Links neben der Zeilenanzeige im Codefenster können Sie Haltepunkte setzen um Fehler aufzuspüren. Über den „Step over“-Befehl in der Menüleiste können Sie sich dazu von Haltepunkt zu Haltepunkt hangeln. Über die Registerkarte "Watches" können Sie beispielsweise Variablen festlegen, deren Wert während des Debuggens überwacht werden soll.
Kompatibel zu: Firefox: 0.9 bis 3.1b1pre
