Firebug - Begriffserklärung im Entwickler-Lexikon/Glossar auf www.IT-Visions.de

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.

Querverweise zu anderen Begriffen im Lexikon

Open Source
JavaScript (JS)
Variable
Netzwerk
Methode
Panel
Hypertext Markup Language (HTML)
Cascading Style Sheet (CSS)

Beratung & Support

Anfrage für Beratung/Consulting zu Firebug Gesamter Beratungsthemenkatalog Technischer Support zum Firebug

Schulungen zu diesem Thema

JavaScript/ECMAScript zur Browserprogrammierung - Basiswissen (Grundlagen für Einsteiger)

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

Erklärung des Begriffs: Firebug

Was ist Firebug ?

Querverweise zu anderen Begriffen im Lexikon

Beratung & Support

Schulungen zu diesem Thema

Bücher zu diesem Thema