Drücke die Tasten ◄ ► für weitere Artikel  

Web-Layouts analysieren und variieren mithilfe des Firefox-Plugins: CSS bearbeiten mit Firebug

Aus dem
t3n Magazin Nr. 10

12/2007 - 02/2008

Firebug ist ein mächtiges Werkzeug und für so manchen Webentwickler das Firefox-Add-On schlechthin. Der folgende Artikel konzentriert sich im Gegensatz zu vielen Tutorials im Web konkret auf die Arbeit mit CSS und zeigt anhand eines kleinen Abstechers zur Website von typo3.org, wie Firebug effektiv zur Analyse von Stylesheets eingesetzt wird.

Nach der Installation erscheint [1] an drei Stellen im Browser: Im Menü „Extras“ gibt es das Untermenü „Firebug“, im Kontextmenü der Webseite den Befehl „Inspect Element“ und in der Statusleiste ganz rechts ein kleines, unscheinbares Symbol. Starten und schließen lässt sich auf verschiedene Arten, aber am einfachsten sind zwei Tastenkürzel: Die Taste „F12“ schaltet Firebug unten im Browserfenster ein beziehungsweise aus. Die Tastenkombination „STRG+F12“ öffnet Firebug in einem eigenen Fenster, was besonders bei der Arbeit mit zwei Monitoren sehr praktisch ist.

Da die Aktivitäten von Firebug den Browser manchmal etwas ausbremsen, ist das Programm nach der Installation zunächst ausgeschaltet. Es muss beim ersten Aufruf mit einem Klick auf „Enable Firebug“ aktiviert werden. Firebug kann auch für einzelne Websites geblockt oder erlaubt werden (Extras – Firebug – Allowed Sites) und Sites mit intensivem JavaScript-Gebrauch sollten nach und nach auf die schwarze Liste kommen.

Register HTML: Die Übersicht

Nach dem Start wird zunächst das Register „HTML“ und ein zweigeteiltes Fenster angezeigt. Links befindet sich eine hierarchische Darstellung des Quelltextes mit markiertem „body“. Per Mausklick oder Pfeiltasten kann der Benutzer sich dort durch den HTML-Baum bewegen und die Hierarchien ein- und ausklappen. Im rechten Fensterbereich werden für das links markierte HTML-Element alle vorhandenen Formatierungen angezeigt. Neben dem Register „Style“ sehen Sie dort noch „Layout“ und „DOM“ sowie ganz außen „Options“. Übrigens lässt sich das Programm in weiten Teilen komfortabel mit der Tastatur bedienen. Eine Übersicht über die Shortcuts findet sich auf der Firebug-Website [2].

Oberhalb des HTML-Registers sind noch weitere Bedienelemente, zum Beispiel das Firebug-Symbol. Ein Klick darauf öffnet das Systemmenü zum Ändern der Textgröße oder zahlreicher anderer Einstellungen. Daneben folgen die Befehle „Inspect“ und „Edit“ sowie eine Auflistung der Vorfahrenelemente für das im Quelltext markierte Element. Sie muss von rechts nach links gelesen werden und ist wie fast alles in Firebug „hover“- und anklickbar. Am rechten Rand des Fensters befinden sich noch ein Suchfeld sowie zwei rote Symbole. Eines ist zum Loslösen des gesamten Fensters vom Firefox-Fenster und das andere zum Schließen des Plugins. Im Suchfeld können Sie nach Zeichen suchen, die, falls vorhanden, im Quelltext hervorgehoben werden.

1 3 4
Autor:
Empfiehl diesen Artikel jetzt weiter!

Bewerten
VN:F [1.9.22_1171]
5 Antworten
  1. von Runde Ecken 3 am 15.09.2009 (07:33Uhr)

    [...] immer sehr hilfreich bei der Fehlersuche ist das Firefox Addon Firebug, hier ein deutsches Tutorial [...]

  2. von Meine wichtigsten Firefox - Addons am 19.10.2009 (16:54Uhr)

    [...] ihr euch in das Tool einarbeiten könnt gibts hier noch ein Link zu einem deutschsprachigen Tutorial und noch einen zu englischen Erläuterungen nebst [...]

  3. von .::.Caro.::. am 21.03.2012 (18:00Uhr)

    Super Turoial, vielen Dank. Endlich verstehe ich diesen Firebug mal ein wenig. Bisher zwar immer installiert gehabt, aber nie verstanden was der will :D

    1000 Dank für die super Erklärung, bloss nie löschen - zwecks nachlesen :D

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Firefox
Von Firebug bis Dragonfly – Debugging von CSS und HTML
Von Firebug bis Dragonfly – Debugging von CSS und HTML

Das leidige Thema im Webdesign: Debugging. Fehlersuche kann ein zeitraubendes Problem darstellen. Wir zeigen euch, wie ihr Fehler finden – und vermeiden könnt. » weiterlesen

Codacy: Warum dieses Debugging-Tool das nächste große Ding für GitHub sein könnte
Codacy: Warum dieses Debugging-Tool das nächste große Ding für GitHub sein könnte

Das Debugging-Tool Codacy verspricht, die Qualität von Github-Projekten zu erhöhen und euren Code für euch zu testen. Wir haben uns das Projekt angeguckt und einen Promo-Code für euch, mit dem... » weiterlesen

CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch
CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch

CSS Diner ist ein kleines Spiel, bei dem ihr mit CSS-Selektoren verschiedene Elemente aus einer interaktiven Grafik auswählen müsst. In diesem Artikel zeigen wir euch, warum dieses Spiel nicht... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen