Firefox Erweiterung: FireBug

Firefox Erweiterung: FireBug

Eines der genialsten Tools, die ich in den letzten Jahren kennengelernt habe, ist Firebug. Dieses clevere Firefox Add-On erspart mir monatlich geschätze 10-15 Stunden beim Erstellen von Design-Vorlagen, bei der Kontrolle von Stylesheets, beim Aufspüren von Fehlern in CSS u.v.m.

Wie installiere ich Firebug?
Ganz einfach – klicke auf diesen Link, dann landest Du auf der Seite des Add-Ons. Laß Dich nicht von den japanischen Schriftzeichen irritieren. Wenn Du bereits im Firefox Browser bist, mußt Du nur auf den “Installation“-Link klicken. Es öffnet sich ein Dialogfenster, das Dir erlaubt, das Add-On mit einem Klick zu installieren. Nach einem Neustart von Firefox findest Du rechts unten im Browserfenster ein rundes Symbol (ist Firebug aktiviert, ist es grün, ist Firebug deaktiviert, erscheint es grau).

Was kann Firebug?
Öffne eine beliebige Seite im Browserfenster und klicke auf das Firebug Symbol. Im unteren Teil des Browserfensters erscheint nun das Firebug-Menü. Klicke im Firebug-Menü auf “Inspect“. Führe den Cursor über verschiedene Bereiche der Seite. Du siehst alle HTML- und CSS-Elemente, aber auch Scripts etc. markiert. Je nachdem, auf welches Element Deine Cursor zeigt, siehst Du im unteren Bildschirmteil die HTML-Hierarchie, die Verschachtelung von XHTML-Elementen, die dazugehörigen CSS-Definitionen, ob diese durch eine Vererbung beeinflußt werden und hunderte andere Hinweise mehr.

In der Praxis – Beispiel
Ich suche in einer Seite, die ich gerade erstelle, die Abhängigkeiten eines bestimmten CSS Elements in dem Dokument. z.B. sehe ich nicht auf den ersten Blick, warum eine Schriftgrösse anders dargestellt wird, als ich es definiert habe. Firebug zeigt mir nun evt., daß sich die Schriftgrösse durch die Abhängigkeit von der Schriftgröße in einem Eltern-Element ergibt.

[techtags: browser, firefox, firefox add-on, firebug, debugging, css, xhtml, eliZZZa]

No comments