Vorheriger Artikel Nächster Artikel

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

Aus dem
t3n Magazin Nr. 10

12/2007 - 02/2008

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 im Web konkret auf die Arbeit mit und zeigt anhand eines kleinen Abstechers zur Website von .org, wie effektiv zur Analyse von Stylesheets eingesetzt wird.

Nach der Installation erscheint Firebug [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 Firebug 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.

Abonniere jetzt t3n-News über WhatsApp und bleib mobil auf dem Laufenden!
t3n-News via WhatsApp!
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von .::.Caro.::. am 21.03.2012 (18:00 Uhr)

    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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Aktuelles aus dem Bereich Firebug
Ein Rucksack voller nützlicher CSS-Schnipsel: Das CSS der Zukunft?
Ein Rucksack voller nützlicher CSS-Schnipsel: Das CSS der Zukunft?

Von den Machern von Simpla, einem Content-Management-System für Designer, kommt Rucksack – eine umfangreiche Sammlung aufgebohrter CSS-Features, die den Designprozess unterstützen und … » weiterlesen

Webbasierter HTML-Editor für Anfänger: Das kann Mozillas Thimble
Webbasierter HTML-Editor für Anfänger: Das kann Mozillas Thimble

Mozilla hat Thimble, ihren webbasierten HTML-Editor für Anfänger, deutlich überarbeitet. Wir zeigen euch, was das Tool alles kann. » weiterlesen

SEO: 20 Browser-Plugins für den täglichen Einsatz
SEO: 20 Browser-Plugins für den täglichen Einsatz

Browser-Plugins erleichtern die Arbeit eines jeden Webworkers. In diesem Artikel konzentrieren wir uns auf „SEO-Plugins“ für Google Chrome und Mozilla Firefox – Erweiterungen also, die Nutzer … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?