Das Addon Firebug für Firefox stellt eine ganze Reihe von Funktionen für Webentwickler zur Verfügung, wie Header-Anzeige, Ladezeit-Analysen oder DOM-Navigation.
Aber für jeden, der selbst Webseiten gestaltet, ist schon alleine die Funktion Element untersuchen es wert, das Addon zu installieren.
Die Erweiterung Firebug suchen und installieren Sie am einfachsten über den Menüpunkt Extras – Addons im Firefox
So nutzen Sie die Analyse-Funktion von Firebug
Klicken Sie eine Stelle, deren Formatierung sie interessiert, mit der rechten Maustaste an und wählen dann im erscheinenden Menü die ganz unten erscheinende Option Element mit Firebug untersuchen aus.
Als Folge erscheint am unteren Bildrand ein neues Fenster, das in mehrer Sektionen aufgeteilt ist.Den größten Raum nimmt dabei die Darstellung des Quelltext ein. Der HTML-Teil. der für das von Ihnen anhgeklickte Element zuständiog ist, wird duch eine Markierung fdett hervorgehoben.
Die Darstellung des HTML ist dabei hierarchisch, mit der Möglichkeit, durch Einklappen den Überblick zu behalten. Dadurch sehen Sie gut die Eltern-Elemente des gewählten Bereichs und können sich in der Hierarchie hochhangeln.
So finden Sie mehr über den aktuellen HTML-Schnipsel heraus
Wenn Sie mit dem Mauscursor auf einen anderen Bereich im Quelltext gehen, wird der damit definierte Bereich im Browserfenster durch eine farbige Unterlegung hervorgehoben.
Über dem Quellcode-Fenster sehen Sie dazu noch den logischen Pfad zum aktuellen Element inklusive der jeweiligen CSS-Klassen, wie etwa
h3 < div#content < body#article < html
Die Anzeige entpricht dem Pfad des markierten HTML innerhalb des DOM-Baumes.
So probieren Sie Änderungen am HTML-Quelltext aus
Ein Klick auf Bearbeiten öffnet den Quellcode des aktuellen Elements in einem Editorfenster. Hier können Sie Teile herauskopieren oder Änderungen vornehmen, die im Browserfenster sofort angewendet werden. Das ist zum Testen praktisch und kürzt den üblichen Zyklus „Ändern-Hochladen-Browserreload“ ab.
Die selektive CSS-Darstellung ganz rechts ist auch sehr praktisch: Sie zeigt die Vererbungshierarchie an. Wird beispielsweise eine Formatierung durch eine andere effektiv ausser Kraft gesetzt, streicht Firebug die ursprüngliche Definition durch. Auch hier können Sie direkt Änderungen vornehmen und das Ergebnis im Browser überprüfen.
So sehen Sie die wirksamen CSS-Regeln
Bei allen Varianten der HTML-Ansicht sehen Sie rechts ein CSS-Fenster. Das zeigt selektiv für das aktuell markierte HTML-Tag die Elemente und Attribute an, die sich dort auswirken.
Zusätzlich erhalten Sie eine Ansicht der Vererbungshierarchie, wobei sich das CSS-Fenster weiter aufteilt. Wird eine Formatierung durch eine andere effektiv außer Kraft gesetzt, streicht Firebug die ursprüngliche Definition durch.
Wenn Sie also beispielsweise im CSS für das Tag <h3> einen Font festlegen, der die fürdefinierte Standardschrift überschreibt, dann sehen Sie in diesem Fenster einerseits die Definition zu <h3> und darunter in durchgestrichener Form auch den Auszug aus dem CSS, der den Font für den Body festlegt.
Mit dem Tab Berechnet sehen Sie alle Attribute und Werte des gewählten Elements, wie Sie der Browser aus den verschiedenen Stil-Definitionen ermittelt hat. Es ist quasi die Sicht auf die Daten, die der Browser als Vorlage zum Rendern verwendet.
So probieren Sie CSS-Styles direkt aus
Falls Sie die Auswirkung von CSS-Stilen auf das Layout immer noch so testen, dass Sie im Editor Ändern und dann die Seite im Browser aktualisieren, bietet Ihnen Firebug eine deutliche Erleichterung an.
Denn wird zu einem Element das zugehörige CSS angezeigt, können Sie alle Werte direkt verändern und die Auswirkung live betrachten.
Klicken Sie dazu einfach auf den jeweiligen Wert, also zum Beispiel auf die Schriftarten hinter „font-face:“ und es öffnet sich ein Eingabefeld. Dort tragen Sie einen anderen Fontnamen ein und sofort ändert sich die Anzeige im Browser entsprechend.
Bei Feldern mit Zahlenwerten oder fester Werteliste (wie „left“, „right“, „center“) können Sie auch einfach mit den Cursortasten die möglichen Werte durchblättern.
Die Möglichkeiten beschränken sich dabei nicht auf das reine Ändern bestehender Definitionen: Klicken Sie auf das Symbol des grauen „Verbotsschildes“ vor einer Zeile, wird sie ausgegraut und verliert in der Browserdarstellung ihre Wirkung.
Um ein neues Attribut einzuführen, klicken Sie die rechte Maustaste und wählen neue Eigenschaft.
Geben Sie im darauf erscheinenden Feld entweder ein Attribut ein oder wählen mittels Pfeiltasten oben/unten eines aus. Dabei bringt Firebug auch passende Vorschlagslisten. Sie können also zum Beispiel „p“ eingeben und drücken danach die vertikalen Cursortasten Dann erscheinen alle passenden Attribute wie „padding“ oder „position“. Per Return-Taste kommen Sie dann zur Eingabe des Werts für das Attribut.
Das Live-Editing lässt sich auch auf das ganze CSS-File ausweiten, statt nur auf den Ausschnitt, der ein bestimmtes Element betrifft. Dazu wählen Sie einfach den Reiter CSS und stellen gegebenenfalls die Methode darunter von „Quelltext bearbeiten“ auf „Live bearbeiten“ um.
Änderungen speichern
Wenn Sie nur ein, zwei Werte im CSS ändern, können Sie sich das natürlich leicht merken und auf Ihren originalen Quellcode übertragen. Sind die Manipulationen dagegen zahlreich, ist das etwas mühsam, denn Firebug hat keinen Button, um Ihre CSS-Änderungen direkt zu sichern. Sie können das aber mit einem Zwischenschritt manuell tun.
Dazu wechseln Sie auf den Reiter „CSS“ im Hauptfenster von Firebug. Dort sehen Sie die vom Server geladene CSS-Datei inklusive der manuell vorgenommenen Änderungen. Markieren Sie den gesamten Quellcode, kopieren ihn in die Zwischenablage und überschreiben damit den bestehenden Code in Ihrem Editor. Nach dem Speichern auf dem Server sollte ein Browser-Reload die Seite so anzeigen, wie Sie sie eben per Firebug verändert haben.
Falls Sie mit mehreren CSS-Dateien arbeiten, müssen Sie die Schritte für jede Datei durchführen. Wie bei Javascript-Dateien erlaubt Firebug das Wechseln der benutzen CSS-Dateien einfach über die Auswahlbox direkt über dem Quellcode.
Als Alternative zu dieser Methode verwenden Sie vielleicht lieber das Zusatztool „FireDiff“ von www.incaseofstairs.com/firediff. Das zeigt Ihnen Zeile für Zeile farblich hervorgehoben an, wo Sie am bestehenden CSS Änderungen vorgenommen haben.
