Firebug 1.5.4 ist das Schweizer Taschenmesser für Webdesigner und Webmaster. Im Browser lassen sich mit Firebug in Echtzeit Codes anzeigen, CSS-Werte manipulieren oder JavaScript-Codes prüfen. Wir zeigen wie es geht.

Webdesigner kennen das Problem: man hat eine Webseite erstellt und will nun schauen, wie diese im Browser aussieht. Man startet eine Vorschau, stellt fest, dass alles noch nicht ganz perfekt ist, schließt die Vorschau, ändert die Werte im Editor, startet die Vorschau neu… und so weiter. Das frisst wertvolle Zeit und hemmt den raschen Fortschritt bei der Webentwicklung.

Mit Firebug 1.5.4 kann man Änderungen am HTML-Code einer Webseite oder an den CSS-Werten in Echtzeit vornehmen.

Zur Darstellung in Originalgröße Abbildungen anklicken
6_1-CSS-Analyse-zeigt-Vererbungsgeschichte-470.jpg

Firebug 1.5.4 wird dabei einfach als Firefox-Addon installiert und ist fortan im Firefox durch ein kleines Käfer-Symbol am unteren Rand des Browserfensters zu sehen. Ein Klick und schon öffnet der Firebug 1.5.4 sozusagen das Herz der angezeigten Webseite: alle Werte, alle Eigenschaften, alle Klassen werden angezeigt und lassen sich gleich im Firebug 1.5.4 selber editieren.

6_2_Echtzeitanalyse-mit-Maus-ueber-Element-fahren-Firebug-zeig_-Code-470.jpg

Die Änderungen werden in Echtzeit angezeigt. Firebug selber nimmt dabei das untere Drittel des Bildschirms ein, sodass man nicht unnötig zwischen Webseite und Firebug hin- und herschalten muss.

Auch die Analyse-Funktion von Firebug ist beachtlich.

6-3-im-Code-angezeigten-Elemente-per-Mausklick-ein-und-ausblenden-470.jpg

Ist sie ausgewählt, muss man mit der Maus nur über einen bestimmten Ausschnitt einer Webseite fahren (eine DIV-Box, ein CSS-Menü, eine Überschrift) und Firebug 1.5.4 zeigt den dazugehörigen Code sofort an. Ideal, um beispielsweise zu sehen, wie andere Webdesigner bestimmte Design-Probleme gelöst haben. Die Vererbungshistorie einzelner Werte und Klassen wird in einem kleinen separaten Fenster genau aufgeschlüsselt.

6_4-DOM-Anzeige-bei-Firebug-per-Mausklick-470.jpg

Abgerundet wird der Funktionsumfang von Firebug 1.5.4 durch eine Suchfunktion, die es dem Anwender ermöglicht, gezielt nach bestimmten Code-Teilen zu suchen.

6_5-Firebug-bietet-Fehleranalyse-fuer-Webseiten-470.jpg

Wer z.B. sehen möchte, welche CSS-Klassen den Tags zugeordnet sind, kann einfach nach dem entsprechenden HTML-Tag suchen und Firebug markiert dieses dann sofort.

6_6-in-Programm-Einstellungen-fuer-Firebug-Funktion-eigenes-Kuerzel-erstellen-470.jpg