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 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 typo3.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.

1 3 4
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 Firefox
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 4)
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 4)

HTML5, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler … » weiterlesen

10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 1)
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 1)

HTML5, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler … » weiterlesen

Coden in Firefox: Mozilla stellt Entwicklungsumgebung WebIDE vor
Coden in Firefox: Mozilla stellt Entwicklungsumgebung WebIDE vor

Firefox enthält jetzt im Nightly Build eine eigene Entwicklungsumgebung namens WebIDE. Damit können Entwickler direkt im Mozilla-Browser Web-Anwendungen entwickeln, bearbeiten und testen. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen