Firebug – Die Gratis-Erweiterung für Web-Entwickler

Die Entwicklung des Internets hat in den vergangenen Jahren dafür gesorgt, dass viele Nutzer vom reinen Konsumenten zum Prosumenten, einer Mischung aus Produzent und Konsument von Inhalten, geworden sind. Gelesene Inhalte werden kommentiert oder aufgeschnappt und in sozialen Netzwerken oder auf eigenen Blogs verbreitet und mit einer eigenen Meinung versehen. Dass diejenigen, die sich für eine eigene Seite entscheiden, hier und da vor technische Probleme gestellt werden, ist dabei unvermeidlich. Um bei der Lösung dieser Probleme zu helfen, oder einfach nur um Hintergründe über andere Seiten zu erfahren, hat Joe Hewitt die kostenlose Web-Entwickler- Erweiterung Firebug zum Browser Firefox entwickelt.

Firebug in Betrieb nehmen

Die Erweiterung bleibt so lange ausgeschaltet, bis Sie sie wirklich benötigen und verschwindet, wenn Sie das Tab wechseln. Sobald Firebug installiert wurde, befindet sich eine grau hinterlegte Biene in der rechten Ecke der Firefox Navigation Toolbar. Klicken Sie auf diese, um das Programm zu öffnen. Es startet augenblicklich im unteren Teil der Webseite und zeigt sofort die HTML- oder alternativ die CSS-Codes an. Wenn Sie nur mit diesen Codes arbeiten, haben Sie schon alles, was Sie von Firebug benötigen. Wenn Sie beispielsweise den Javascript-Code bearbeiten und die Netzwerk-Aktionen einer Seite studieren wollen, muss diese Funktion erst freigeschaltet werden. Klicken Sie auf den grau hinterlegten Skript -Button und aktivieren Sie das Panel. Danach kann es problemlos genutzt werden.

Was kann Firebug?

Nachdem das Open Source-Projekt installiert wurde, steht Ihnen gleich eine ganze Reihe an nützlichen Web-Entwickler-Tools zur Verfügung. Mit diesen können Sie Ihre Webseite bearbeiten, Bugs aufspüren und entfernen sowie die HTML-, CSS- und JavaScript-Codes lesen und bearbeiten. Die Codes werden dabei in übersichtlicher Form dargestellt, unter anderem mit unterschiedlichen Farben, um sich innerhalb des Gewirrs besser zurechtfinden zu können. Gerade für ungeübdte Programmierer ist diese Eigenschaft Gold wert. Praktisch ist auch die Möglichkeit, ein Element auf der Seite direkt im Code zu betrachten: Fahren Sie mit dem Mauszeiger über eine Stelle auf der Seite, wird der entsprechende Bereich im Code eingeblendet, sodass Sie nicht unnötig suchen müssen.

HTML-Entwicklung

Mit Firebug können Sie auch tief in der Seitenstruktur vergrabene Codes in wenigen Sekunden auslesen. Sobald Sie das gefunden haben, wonach Sie suchen, gibt das Programm Ihnen eine Menge an Informationen und lässt Sie den Code live editieren. So lässt sich leicht experimentieren und mit wenigen Handgriffen können auch relativ unerfahrene Nutzer Ergebnisse erzielen. Veränderungen im Code werden gut sichtbar gelb hinterlegt, damit Sie die Übersicht nicht verlieren. Auch die Arbeiten an Javascript und CSS verlaufen ähnlich problemlos.

Fehler finden und bearbeiten

Wenn etwas auf Ihrer Seite falsch läuft, gibt Firebug Ihnen sofort Bescheid und liefert dabei nützliche und hilfreiche Informationen, was bezüglich Javascript, CSS und XML falsch gelaufen ist. Am Firebug-Button in der Toolbar werden rot hinterlegt die Zahl der falschen Code-Teile angezeigt. Durch einen Klick auf diese landen Sie in der Konsole, wo jeder Fehler übersichtlich und einzeln aufgelistet wird. Am Ende jedes Berichts findet sich ein Link zum Debugger, mit dem Sie den fehlerhaften Teil des Codes behandeln können.

Fazit

Die oben genannten Möglichkeiten sind nur ein Teil der Tools, die in Firebug enthalten sind. Das Open Source-Programm ist nützlich, hilfreich und verhältnismäßig einfach in der Bedienung. Jedem Web-Entwickler, der regelmäßig mit Firefox als Browser arbeitet, ist ein Download wärmstens zu empfehlen.
Das Programm können Sie kostenlos auf der Website des Herstellers herunterladen.