Firebug: Webseiten untersuchen mit Firefox-Addon

Das Firefox-Addon Firebug (es gibt zwei unterschiedliche Firebug-Versionen für die verschiedenen Firefox-Versionen) bietet Web-Entwicklern umfangreiche Funktionen um CSS, HTML und JavaScript auf ihren Webseiten auf Fehler zu kontrollieren und diese zu protokollieren und anschließend zu korrigieren. Außerdem können Sie mit Firebug beispielsweise CSS-Layouts überprüfen, DOM-Objekte anzeigen und editieren oder genaue Analysen über die Ladezeiten der einzelnen Seitenelemente anstellen. Firebug hat sich als dermaßen unverzichtbar herausgestellt, dass es von Browserentwicklern wie Google oder Apple sowie Microsoft zum Vorbild genommen wurde für Entwicklerwerkzeuge, die direkt in Google Chrome, Safari und in den Internet Explorer integriert wurden. Mit der Einführung von Firefox 10 versucht Mozilla jedoch Firebug direkt Konkurrenz zu machen. Und zwar mit den direkt in Firefox 10 eingebauten Entwickler-Werkzeugen, die Sie unter "Extras, Web-Entwickler" finden.

Viele Wege führen zum Ziel um dieses ungemein nützliche Firefox-Addon zu starten. Entweder über das Browsermenü "Ansicht, Firebug" oder über das Kontextmenü der rechten Maustaste ("Element mit Firebug untersuchen"). Über das Wanzen-artige Icon rechts oben in Firefox können Sie Firebug ebenso starten wie mit einen Tastendruck auf F12. STRG+F12 startet Firebug zudem in einem eigenen Fenster. Standardmäßig öffnet sich das Firebugfenster am unteren Browserrand, es besteht defaultmäßig aus einem größeren linken und einem kleineren rechten Fenster (die Größe lässt sich aber jederzeit anpassen).

Das linke Firebug-Fenster besteht aus mehreren Reitern: Konsole (die Sie extra aktivieren müssen, um Fehlermeldungen, wie beispielsweise Syntaxfehler angezeigt zu bekommen), HTML, CSS, Skript (hier können Javascript-Programmierer Debugging-Funktionen nutzen), DOM und Netzwerk. Das "Konsole"-Menü ist für Javascript-Programmierer wichtig. Hier können Sie schnell mal neue Javascript-Code-Teile schreiben und ausprobieren, ohne dafür eigens eine HTML-Seite als Rahmen erstellen zu müssen. Die Konsole bietet sogar Code-Ergänzung und erleichtert damit das Programmieren ungemein.

Profi-Erweiterungen für Firefox

Sofern weitere für Firebug gedachte Firefox-Addons wie das Prüf-Addon Yslow installiert sind, werden auch diese als Reiter in Firebug integriert. Nach dem Start von Firebug ist standardmäßig der Reiter HTML geöffnet.

Schauen wir uns den Menü-Punkt HTML ausführlich an: Im linken (vom Start weg größeren) Firebug-Fenster wird der gesamte Quelltext einer Website hierarchisch dargestellt – jedes Element, das Unterebenen enthält, lässt sich durch einen Klick auf das Plus-Zeichen ausklappen. Im eingeklappten Zustand behält man leichter den Überblick über den Quellcode einer Website. Wenn Sie hier ein Element anklicken, werden im rechten Fenster unter dem Reiter „Styles“ die zu diesem Element gehörenden CSS-Formatierungen inklusive der vererbten Werten angezeigt (überschriebene CSS-Werte werden durchgestrichen dargestellt). Wenn Sie jetzt auf die Schnelle eine andere Optik ausprobieren wollen, dann ändern Sie einfach die Werte für die Formatierungen: Tragen Sie also beispielsweise eine andere Farbe von Links ein, zum Beispiel red statt orange. Die Änderung wird sofort im Browser dargestellt. Obendrein wird die ausgewählte Farbe in einem kleinen Kästchen als Vorschau angezeigt. Das klappt ebenso mit Font-Styles: Je nachdem, ob Sie normal, italic oder bold eintippen, ändert sich sofort die Schriftdarstellung im ausgewählten Element.

Wenn Sie mit dem Mauszeiger über den Quellcode fahren, dann wird im oberen Browserfenster der Teil der Website, der durch den jeweiligen Quellcode dargestellt wird, hellblau hervorgehoben. Sie sehen also sofort, welcher Code-Teil was auf der Website bewirkt.

Genial ist die Suchfunktion über das Eingabefeld rechts oben im Firebug-Fenster: Wenn Sie einen bestimmten Code-Bestandteil oder Text von der Seite suchen, dann geben Sie den gesuchten Begriff einfach hier ein. Firebug springt dann sofort an die Stelle im Quelltext, an der der gesuchte Begriff steht. Dabei können Sie auch festlegen, ob Groß- und Kleinschreibung beachtet werden soll.

Neben Styles gibt es auch noch die Reiter "Berechnet" (mit allen Stile-Werten), Layout und DOM im rechten Fenster. Layout verschafft schnell einen optischen Überblick über Seiten- und Elementeabstände. Visuell werden hier also die Pixel-Werte für Offset, Margin, border und padding sowie der Inhalt abgebildet. Bewegen Sie die Maus über die Layoutdarstellung, um den gewünschten Abschnitt zu markieren. Auch hier können Sie jederzeit mit den Werten spielen um unterschiedliche Darstellungen auszuprobieren. Über den Reiter DOM können Sie die DOM-Struktur der Website erkunden.