Sie sind hier: Lexikon/Glossar
Logo der Firma www.IT-Visions.de
MENU

Erklärung des Begriffs: Firebug

Werbung
 Zur Stichwortliste unseres Lexikons

Was ist Firebug ?

Von André Krämer

Die Entwicklung moderner Webseiten ist kein leichtes Unterfangen. Neben den Herausforderungen im serverseitigen Quellcode gilt es auf der Client-Seite, HTML, JavaScript und CSS zu meistern.
Die kostenfreie Firefox Erweiterung Firebug hilft, den Überblick zu bewahren und Fehlern im HTML Quelltext, den CSS Stildefinitionen sowie dem JavaScript Code auf die Schliche zu kommen.
Das unter einer BSD Lizenz stehende Open Source Werkzeug wurde ursprünglich im Jahr 2006 von Joe Hewitt, der zum initialen Firefox Team gehörte, programmiert. Die Weiterentwicklung wird von der Firebug Working Group gesteuert. Das Werkzeug kann über die Mozilla Erweiterungsbibliothek unter https://addons.mozilla.org/de/firefox/addon/firebug/, oder auch direkt unter https://getfirebug.com herunter geladen werden.
Nach erfolgreicher Installation integriert sich Firebug direkt in den Browser. Der Start erfolgt über die Taste F12.
Das Werkzeug zeigt sich nun als eigenes Panel im unteren Bereich des Browserfensters. Über sieben Karteikartenreiter können die Hauptfunktionalitäten des Werkzeugs ausgewählt werden. Der erste Bereich, „Konsole“, ermöglicht es, Ad-Hoc JavaScript Code einzutippen und auf der aktuell dargestellten Internet Seite auszuführen. Außerdem werden in diesem Bereich auch JavaScript- oder netzwerkbezogene Fehlermeldungen des Browsers ausgegeben.
Auf dem Reiter „HTML“ werden alle Knoten des Document Object Models (DOM) in einer aufklappbaren Baumstruktur, ähnlich dem Windows Explorer, dargestellt. Hier hat der Anwender die Möglichkeit, Elemente zu markieren, die anschließend auch sofort auf der gerenderten Seite umrahmt werden. Umgekehrt kann über ein Auswahlwerkzeug auch ein HTML-Element auf der aktuellen Seite ausgewählt werden, welches dann in der Baumstruktur markiert wird. Neben der reinen Selektion kann die Seitenstruktur hier auch direkt editiert werden. Außerdem werden für jedes Element auch die darauf angewandten CSS Stilregeln angezeigt. Auch für diese besteht die Möglichkeit der direkten Bearbeitung.
Auf der Karteikarte „CSS“ können alle CSS-Dateien, die für die aktuelle Seite geladen wurden, ausgewählt, inspiziert und bearbeitet werden.
Analog dazu gibt es den Reiter „JavaScript“. Hier können geladene JavaScript Dateien begutachtet werden. Außerdem bietet sich hier die Möglichkeit, den JavaScript Quelltext zu debuggen. Veränderungen am Code können jedoch nicht vorgenommen werden.
Auf weiteren Reitern können sämtliche Variablen und Methoden des DOM eingesehen, der Netzwerkverkehr analysiert und Cookies begutachtet werden.
Neben den vorgestellten Standardfunktionalitäten gibt es eine Fülle nützlicher Erweiterungen für Firebug, wie zum Beispiel Yahoos Webseiten Analysewerkzeug YSlow.

Beratung & Support

Schulungen

  Anfrage für eine individuelle Schulung zum Thema FIREBUG   Gesamter Schulungsthemenkatalog

Fachbücher

  Alle unsere aktuellen Fachbücher   E-Book-Abo für ab 99 Euro im Jahr