Firebug: Wie benutze ich ihn richtig? – Teil #3

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

Im dritten Teil der Reihe möchte ich auf die direkte Code-Manipulation eingehen, die man mit Firebug ins Besondere im HTML-Bereich machen kann. Damit lassen sich auch Template-Änderungen im Voraus prüfen.

Es gibt zwei Möglichkeiten, den HTML-Code einer Seite zu bearbeiten, je nachdem, wie umfangreich die Änderungen sein sollen. So lässt sich z.B. mit einem Doppelklick auf die Klasse diese bearbeiten oder auch eine weitere Klasse hinzufügen. Dasselbe gilt für die ID oder aber den Inhalt eines Elements. Sollte der Code in irgendeiner Weise falsch sein, wird er von Firebug einfach entfernt. Gibt man z.B. als ID zwei Worte mit einem Leerzeichen dazwischen an, ist das ungültig, da ein Element lediglich eine ID haben darf. Dann wird das Feld der ID einfach geleert.
Aus dem jeweiligen Eingabefeld einer Klasse, ID oder des Inhalts kommt man immer einfach heraus, indem man einen anderen Bereich anklickt.

Diese Art der Bearbeitung eignet sich vor allem dann, wenn man nur Kleinigkeiten ändern will wie z.B. das Testen einer anderen Klasse an einem Element oder aber wenn der Inhalt unpassend kurz oder lang ist und man es mit einer anderen Länge testen möchte.

Die zweite Bearbeitungsmöglichkeit ist wesentlich umfangreicher, da sie auf Wunsch den kompletten HTML-Code zur Bearbeitung bereitstellt. Hierzu wählt man einfach das entsprechende Element an, das man ändern möchte und klickt oben links auf „Bearbeiten“.
Hierbei lassen sich auch einfach Inhalte hinzufügen, da das ausgewählte Element inklusive aller Kind-Elemente in einem Textfeld dargestellt wird, das man beliebig ändern, kürzen und erweitern kann. So lässt sich z.B. einfach prüfen, wie ein Menü bei mehr oder weniger Elementen aussieht, da man diese einfach hinzufügen oder entfernen kann.

Beide Bearbeitungsmöglichkeiten sind allerdings, wie von Firebug gewohnt, nach einem Neu Laden der Seite wieder verschwunden. Hier muss man demnach abwägen, ob man lieber die Elemente unter Umständen mehrmals ändern will oder das direkt im Voraus im Template bereits macht.

Neu hinzugefügte oder geänderte Elemente lassen sich dabei natürlich wie gewohnt über CSS ansprechen, der CSS-Code, der dabei auf ein Element wirkt, wird dabei live aktualisiert.


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

2.532 mal gelesen

Kommentare 0

Es wurden keine Einträge gefunden.

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen