Firebug zum Einstieg in die Webentwicklung
Firebug 1.8 im Test: Entwickler-Werkzeug für Mozilla Firefox 5
Moderne Anwendungen für die Webentwicklung, wie zum Beispiel Adobes Dreamweaver, nehmen ihren Benutzern einen großen Teil der Arbeit ab: Sie generieren nicht nur das Grundgerüst einer Seite in HTML selbstständig, sondern fassen auch CSS- und JavaScript-Dateien automatisch ab. Wer im Browser die Resultate seiner Arbeit überprüfen möchte, erhält mit Firebug ein mächtiges Werkzeug, das direkt im Firefox eingerichtet wird.
Inhaltsverzeichnis
- 1Systemanforderungen
- 2Firebug unter Firefox 5
- 3HTML, CSS und Skripte
- 4Fazit
Systemanforderungen
Die aktuelle Firebug-Version 1.8 ist am 29. Juli 2011 erschienen und auf Mozilla Firefox 5.0 oder neuer ausgelegt. Auf der Projektseite kann der Nutzer eine .xpi-Datei herunterladen, die sich dann auf jedem beliebigen Computer mit Firefox öffnen und installieren lässt. Noch etwas einfacher ist die Einrichtung über Mozillas Plugin-Manager: Dort erscheint Firebug schon unter den beliebtesten Erweiterungen, der Anwender kann es mit einem einzigen Klick einrichten lassen. In beiden Fällen ist ein Neustart des Browsers notwendig.
Neben der Firefox-Version gibt es zusätzlich eine sogenannte Lite-Ausgabe für Google Chrome und andere Browser, die deutlich weniger Funktionen besitzt und nicht im Fokus der Entwicklungsarbeit steht. Das könnte sich allerdings bald ändern: John Barton, der über mehrere Jahre maßgeblich an Firebug mitgewirkt hat, arbeitet seit einigen Wochen nicht mehr für IBM, sondern für Google. In einer Mitteilung an die Entwickler der Firefox-Erweiterung hat er vorgeschlagen, Firebug doch stärker auf Chrome auszurichten.
Firebug unter Firefox 5
Firebug 1.8 ist nach der erfolgreichen Installation im Firefox 5 erst einmal nicht direkt sichtbar, neben einem kleinen Plugin-Symbol neben der Suchleiste und einem neuen Menüeintrag nimmt die Erweiterung keine Änderungen an der Oberfläche des Browsers vor. Um mit der eigentlichen Arbeit zu beginnen, muss der Nutzer zunächst eine reguläre URL aufrufen - zum Beispiel die seines eigenen Blogs. Sobald die Seite geladen ist, kann er das Firebug-Symbol anklicken, über das ein zusätzliches Fenster im unteren Anzeigebereich geöffnet wird.
Standardmäßig startet Firebug mit der HTML-Ansicht: Der Nutzer kann den Quelltext der aktuellen Seite untersuchen, wobei die Darstellung mit ein- und ausklappbaren Elementen die Übersicht erhöht. Bestimmte Elemente, zum Beispiel Tags oder Attribute, werden zwecks einer besseren Lesbarkeit farbig hervorgehoben, was die meisten Webdesigner sicher schon aus anderen Programmen kennen. Sobald der Anwender einzelne Tags mit der Maus berührt, hebt Firebug den betroffenen Bereich auf der gerenderten Website hervor, sodass auf einen Blick etwa das Header-Tag einer Überschrift und die Darstellung auf der Seite ersichtlich sind.
HTML, CSS und Skripte
In der HTML-Anzeige kann der Nutzer nicht nur den Quelltext einer Seite bis ins Detail untersuchen, sondern ausgewählte Elemente auch direkt bearbeiten: So lassen sich etwa Überschriften direkt im Firefox korrigieren oder Attribute ändern, die sich in Echtzeit auf die Darstellung der Seite auswirken. Gleiches gilt für die CSS-Ansicht, die bei den meisten Seiten maßgeblich für Schriftarten, Farbgebung und andere Design-Parameter verantwortlich ist. Firebug ist sehr nützlich, um die Position eines Elements exakt zu berechnen, das später mit CSS positioniert werden soll. Praktisch ist auch die Farbanzeige für Hex-Werte in CSS-Dateien. Eher an erfahrene Webdesigner richten sich dagegen die Funktionen zum Untersuchen von Skripten. Mit der kostenlosen Software lassen sich kleine und größere Fehler zuverlässig erkennen.
Fazit
Die Funktionspalette von Firebug ist beinahe endlos, so kann das Firefox-Plugin beispielsweise auch die Ladezeit einer Internetpräsenz messen. Für Einsteiger und erfahrene Webdesigner gibt es kaum eine bessere Möglichkeit, ihre Seiten direkt im Browser zu untersuchen - und dabei arbeitet Firebug wie kein anderes Programm das Zusammenwirken der unterschiedlichen Webtechnologien HTML, CSS und JavaScript klar heraus.