Firebug: Wie nutze ich ihn richtig? - Teil #1

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

Da ich immer wieder gefragt werde, woher ich die ganzen Klassen und IDs im Quellcode kenne und überhaupt wie ich Firebug, ein Add-on für Mozilla Firefox, nutze, hier einmal eine Erklärung dazu. Ich hoffe, dass diese dem ein oder anderen bei der eigenständigen Nutzung hilft. ;)

Zuerst einmal muss man das Add-on natürlich installieren. Das geht von hier:
addons.mozilla.org/de/firefox/addon/firebug/

Nach der Installation und dem Neustart des Browsers ist das Tool dann vorhanden. Hier kann man es dann über verschiedene Möglichkeiten aufrufen. Es werden Buttons für die Navigationsleiste sowie die Add-on-Leiste bereitgestellt, im Kontextmenü gibt es den Eintrag "Element mit Firebug untersuchen" und es gibt zwei Tastenkombinationen:
Für das Hervorrufen der Oberfläche genügt ein Druck auf F12.
Für das Hervorrufen und sofortige Untersuchen eines Elements kann man die Tastenkombination STRG + UMSCHALT + C nutzen. Dieses wirkt dann gleich, wie wenn man entsprechenden Button in den Leisten anklickt oder den Kontextmenü-Eintrag.

In diesem ersten Teil gehe ich lediglich auf den Tab "HTML", welcher auch standardmäßig zuerst gezeigt wird, ein.
Hier hat man links den HTML-Teil der Webseite und rechts immer das jeweilige CSS, das auf das gewählte Element wirkt.
Oben links mit dem zweiten Symbol, also dem blauen Mauszeiger mit dem blau umrandeten Rechteck, kann man dann nochmals alternativ zur Tastenkombination und zum Kontextmenü-Eintrag ein Element untersuchen. Vorteil bei dieser und der Möglichkeit der Tastenkombination ist, dass man über die Elemente mit der Maus fahren kann und diese dann noch nicht angewählt sind. Wenn man z.B. nicht weiß, wo ein Element anfängt und ein anderes aufhört, sind diese Möglichkeiten zu nutzen. Ich selbst nutze vorzugsweise nur die Tastenkombination.
Wählt man dagegen ein Element über das Kontextmenü an, dann ist dieses Element auch fest angewählt und kann nur geändert werden, wenn man die Auswahl des Elements ändert.

Alternativ zur Auswahl mit Maus bzw. Tastenkombination kann man auch im HTML-Teil jedes Element anwählen. Praktisch, egal wie man das Element anwählt (außer beim Kontextmenü), es wird wird in der Seite blau markiert. Eventuell vorkommende gelbe Markierungen sind das margin, das auf das Element wirkt, lila Markierungen dagegen sind das padding, das auf das Element wirkt.
Wie man auf dem Screenshot auch sehr gut sehen kann, sieht man dort nun schon direkt die einzelnen Klassen und IDs.


Exkurs Klassen & IDs:
Eine Klasse wird immer mit vorangestelltem Punkt geschrieben, das gewählte Element im Screenshot hat daher die Klasse .userPanel.
Eine ID wird immer mit vorangestellter Raute geschrieben, das gewählte Element im Screenshot hat daher die ID #userPanel.
Die abschließenden Punkte dienen in diesem Fall nur als Satzzeichen und sind nicht mitzuschreiben.

Eine ID darf nur einmal in einem Dokument (auf einer Seite) vorkommen und jedes Element darf maximal eine ID besitzen. Klassen dürfen mehrfach in einem Dokument (auf einer Seite) vorkommen und ein Element darf beliebig viele Klassen besitzen.


Mit einem Klick auf "Bearbeiten" oben links oder mit einem Doppelklick auf eine Klasse/ID lässt sich der HTML-Code auch einfach "on-the-fly" ändern. Das passiert jedoch nur lokal und hat keine Auswirkung auf die Webseite selbst. Andere Benutzer sehen demnach nie die modifizierte Version.

Praktischerweise kann man das rechts mit dem CSS-Code ebenfalls machen. Diesen kann man beliebig ändern.
Um einen bestehenden Wert zu bearbeiten, muss man lediglich einmal mit der Maustaste auf ihn klicken und hat dann den aktuellen Wert in einem Eingabefeld. Um einen neuen Befehl hinzufügen zu können, muss man nur mit einem Doppelklick auf den Bereich unter dem letzten oder neben den vorhandenen Befehlen klicken.
Hat man einen Befehl angeklickt, kann man mit der Tabulator-Taste zwischen den einzelnen Befehlen wechseln.

Ist einem Element noch kein CSS untergeordnet oder man möchte nur genau diesem Element testweise einen CSS-Code zuweisen, so kann man auch den Element-Style angeben. Sofern noch nicht vorhanden, kann man es über Rechtsklick -> Element-Style bearbeiten... auswählen.
Ist man sich noch nicht mit CSS sicher, kann man praktischerweise auch die Auto-Vervollständigung von Firebug nutzen. Alternativ kann man auch z.B. display: block; angeben, dann das "block" markieren und mit den Pfeiltasten nach oben und nach unten die möglichen Werte für "display" ausprobieren.
Auf dieselbe Art und Weise kann man bei einer Angabe von px, em, pt und % den Wert erhöhen oder verringern.


Das war nun der erste Teil einer größeren Reihe rund um Firebug. Es ist ein sehr effektives Tool mit vielen Möglichkeiten. Ich werde hier allerdings nur auf den Design-Teil eingehen, also HTML und CSS.
Bei Fragen stehe ich gerne bereit, da ich weiß, dass ich nicht alles schon im Voraus in meinem Artikel unterbringen kann.

Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

4.432 mal gelesen

Kommentare 4