Kleine Helfer

Firebug - ein Muss für Web-Entwickler

02.09.2011
Von 
Diego Wyllie hat Wirtschaftsinformatik an der TU München studiert und verbringt als Softwareentwickler und Fachautor viel Zeit mit Schreiben – entweder Programmcode für Web- und Mobile-Anwendungen oder Fachartikel rund um Softwarethemen.
Zur Analyse und Optimierung von Web-Seiten hat sich das Firefox-Add-on "Firebug" als Standardwerkzeug für Web-Entwickler etabliert.

Nach der einfachen Installation lässt sich Firebug über ein kleines Icon rechts in der Statusleiste starten. Eine Debug-Konsole im unteren Bereich des Browsers (siehe Screenshot) öffnet sich und zeigt den Quelltext der aktuellen Web-Seite an. Fährt man hier mit der Maus über ein HTML-Element (zum Beispiel <div> oder <table>), wird im oberen Bereich, also im Browser selbst, der entsprechende Seitenabschnitt farbig markiert. Führt man umgekehrt den Kontextmenü-Befehl "Inspect Element" auf einer beliebigen Stelle im Browser aus, markiert Firebug automatisch den entsprechenden Codeabschnitt und zeigt den CSS-Style sowie das Layout des ausgewählten HTML-Konstrukts.

Die bequeme Codenavigation ist aber nicht alles, was dieser kleine Helfer für Web-Entwickler zu bieten hat. Firebug ermöglicht es, den Quelltext jeder beliebigen Website "live" zu editieren. Jede Änderung wird sofort im Browser angezeigt, aber nicht dauerhaft gespeichert. Dadurch lassen sich etwa Fehler im Layout schnell finden oder verschiedene Designvarianten leicht ausprobieren.

Nützliche Zusatzfunktionen: Abgerundet wird das Tool von einer Javascript-Konsole, in der eigene Funktionen getestet werden können. Hinzu kommen eine Ansicht, in der das komplette DOM (Document Object Model) angezeigt wird, sowie ein weiteres "Net"-Modul, das die Ladeseiten und die Größe sämtlicher Bestandteile der aktuellen Website (Bilder, Javascript- und CSS-Dateien sowie Flash-Objekte) zu Optimierungszwecken auflistet.

Ein weiterer Vorteil: Das Tool ist mittlerweile so beliebt, dass es zahlreiche leistungsfähige Erweiterungen dafür gibt - "Meta-Erweiterungen" sozusagen. "YSlow" von Yahoo beispielsweise untersucht Websites auf ihre Ladegeschwindigkeit und meldet, an welchen Stellen Optimierungsbedarf besteht.

CW-Fazit

Wenn es darum geht, eine Web-Seite auf Herz und Nieren zu prüfen, leistet Firebug wertvolle Dienste. Durch zusätzliche Erweiterungen wird es zu einem unverzichtbaren Tool für Web-Entwickler.