Webmaster-Tool

Firebug: Webseiten untersuchen mit genialem Firefox-Addon

Sonntag den 07.12.2014 um 09:12 Uhr

von Hans-Christian Dirscherl

Bildergalerie öffnen Firefox-Addon Firebug
Mit dem kostenlosen Firefox-Add-on Firebug gewinnen Sie ruckzuck den Überblick über den Aufbau einer Website und über die Parameter von deren HTML-Tags. Insbesondere CSS-Werte lassen sich schnell überprüfen und versuchsweise verändern. Javascript-Programmierer können Firebug zudem zur Fehlersuche verwenden und damit auch schnell mal neuen Skripte ausprobieren.
Das Firefox-Addon Firebug 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. Seit 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.

Firebug blendet sich defaultmäßig im unteren Drittel des
Browserfensters ein.
Vergrößern Firebug blendet sich defaultmäßig im unteren Drittel des Browserfensters ein.

Firebug starten

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 (so wie auf unserem Aufmacherbild zu dieser Meldung oben). 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).

In der Konsole von Firebug können Sie sofort
Javascript-Code eingeben
Vergrößern In der Konsole von Firebug können Sie sofort Javascript-Code eingeben

Aufbau des Firebug-Fensters

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 sowie Cookies. 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.

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.

HTML-Quellcode und CSS-Werte auf einen Blick

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.

Quellcode im Browserfenster wiederfinden

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.

Mit der Firebug-Suchfunktion finden Sie schnell jeden
Bestandteil Ihrer Webseite.
Vergrößern Mit der Firebug-Suchfunktion finden Sie schnell jeden Bestandteil Ihrer Webseite.

Suchen mit Firebug

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.

Layout und DOM

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.

Sonntag den 07.12.2014 um 09:12 Uhr

von Hans-Christian Dirscherl

Kommentieren Kommentare zu diesem Artikel (0)
22776