ononlinework

Durch einen Bericht (den ich leider nicht mehr finde) bin ich vor einigen Wochen auf ein Tool gestoßen, das ich selbst nach kurzer Zeit schon nicht mehr missen möchte: Firebug ist ein Firefox-Add-on für Webentwickler.

Die große Stärke von Firebug liegt in der Möglichkeit, sehr schnell einen tiefgehenden Einblick in den HTML- oder XHTML-Quelltext einer Seite zu bekommen. Das Tool öffnet sich dazu entweder unter der Seite oder in einem separaten Fenster und zeigt je nach gewählter Ansicht verschiedene Darstellungen des Quelltextes. Das Spannende: Der gezeigte Quelltext kann direkt im Tool bearbeitet werden und zeigt alle Änderungen sofort in der Seite an.

Die Herangehensweise ist in zwei Richtungen möglich: Entweder man fährt mit der Maus über die Seite und bekommt in Firebug den Quelltext der entsprechenden Stelle angezeigt oder man bewegt sich im Quelltext und bekommt parallel dazu den entsprechenden Bereich der Seite gehighlighted (das Wort wollte ich schon immer mal schreiben).

CSS und Firebug

Das besondere Schmankerl dabei ist für mich aber der rechte Fensterbereich, in dem zu der ausgewählten Stelle noch die entsprechenden Style-Angaben angezeigt werden. Nicht nur die aktuell zutreffenden Style-Angaben werden gezeigt sondern auch alle Angaben, die aus übergeordneten Elementen vererbt wurden. Das macht die Fehlersuche wunderbar einfach.

Die einzelnen Styles können auch – wie oben schon für den XHTML- und HTML-Quelltext beschrieben – bearbeitet oder auch einfach an- und ausgestellt werden. Die Änderungen werden in der Seitenansicht sofort umgesetzt. Eine schnellere und einfachere Möglichkeit, die Auswirkungen einer Styledefinition festzustellen, kann ich mir nicht vorstellen.

Das Box-Modell in der Layout-Ansicht

Auch sehr nett ist die Layout-Ansicht, die das Box-Modell des gewählten Elements grafisch darstellt. Man erhält so sehr schnell einen Überblick über die gerenderte Box mit allen Angaben zur Content-Breite, Padding, Margins, Border und zum Offset in der Seite.

… und es gibt noch viel mehr zu entdecken

Was ich hier noch nicht beschreiben kann – einfach weil ich es noch nicht getestet habe – ist der Umgang mit Scripten und die Behandlung des DOM. Ich bin aber ungesehen davon überzeugt, dass das Tool auch in diesen Bereichen mit Bravour abschneidet – schließlich hat es sich eigentlich aus einer Konsole heraus entwickelt IIRC.

Die beschriebene Version ist übrigens noch als Beta deklariert und nur über die Entwickler-Site zu bekommen. Im Add-on-Verzeichnis von Mozilla liegt noch eine erheblich ältere Version, die nicht annähernd den beschriebenen Leistungsumfang hat. Bei mir hat die Beta auf zwei unterschiedlichen Rechnern keine Probleme verursacht.

Also: Testet das Tool, seid genau so begeistert wie ich (davon bin ich überzeugt) und unterstützt das Projekt durch eine angemessene Spende. Ich bin sicher, dass der Entwickler sich das Geld redlich verdient hat.

Der Stefan