Firebug: dem Webworker seine liebste Feuerwanze

Von Perun am 16. Dezember 2009 um 18:26

Neben der Web Developer Toolbar, welche ich hier, hier und hier beschrieben habe, ist Firebug die Firefox-Erweiterung, die ich am meisten einsetze und die mir unschätzbar wertvolle Dienste erweist, wenn es darum geht eine Website unter die Lupe zu nehmen und auf "Herz und Nieren" zu prüfen.

Auch wenn den allermeisten Webworkern die Erweiterung bekannt sein durfte, werde ich sie hier dennoch aus zwei Gründen beschreiben. Es gibt noch erstaunlich viele Webdesigner, die das Firefox-Addon nicht kennen und zudem wollte ich in Zukunft einige Erweiterungen (Extensions) für Firebug vorstellen und mich dann auf diesen Artikel beziehen.

Bei Firebug die Debugging-Funktionen (Fehlersuche, Fehlerbereinigung klar im Vordergrund, und das nicht nur für HTML und CSS, sondern auch für JavaScript.

Mit dem Addon kann man aus dem Browser heraus HTML, CSS und JavaScript live auf jeder Website beobachten, editieren und debuggen, DOM-Elemente untersuchen und XmlHttpRequest-Aufrufe (XHR) überwachen. Alle Veränderungen, die man vornimmt, sind temporär und nur für dich sichtbar: man macht also nix kaputt.

Nach der Installation der Erweiterung und dem Neustarten des Browsers integriert sich Firebug innerhalb von Firefox. Dabei stehen drei Möglichkeiten zum Starten des Addons zur Verfügung: Entweder du startest den Firebug über den Icon in der Statusleiste, über die Taste F12 oder über das Kontextmenü ("Element untersuchen"). Der Weg über das Kontextmenü (rechte Maustaste) startet Firebug zielgerichtet, da das aktuell gewählte Element direkt in Firebug aufgerufen und markiert wird.

Welche Besonderheiten bietet Firebug

Zum einen kann man sehr komfortabel und übersichtlich den Quelltext der jeweiligen Website einsehen. Die einzelnen Codeelemente des Quelltextes sind gefaltet (engl. Code Collapse) und können durch das Anklicken des Plus-Zeichens aus- und durch das Anklicken des Minus-Zeichens eingeklappt werden.

Firebug im Einsatz

Der HTML-Viewer zeigt dir den "wirklichen" Zustand des Dokumentes an. Sind JavaScript-Dateien im Dokument referenziert bzw. eingebunden, die z. B. dazu dienen, das HTML zu manipulieren oder Inhalte auszugeben, dann wird auch deren Ergebnis angezeigt.

Darüber hinaus ist man mit Firebug in der Lage, auf jeder Website live (nur temporär und für einen selbst sichtbar) den HTML- und CSS-Code zu ändern, die Elemente zu visualisieren und deren Dimensionen anzuzeigen.

Sehr nützlich ist es, dass man in der Drei-Fenster-Ansicht (Website + zweigeteiltes Firebug-Fenster) bei dem Hauptpunkt "HTML" im oberen Fenster die einzelnen Elemente der Website ansteuern kann.

Im linken unteren Fenster wird der entsprechende Abschnitt im HTML-Quelltext markiert und angezeigt. Im rechten unteren Fenster wird entweder der passende Bereich im CSS-Dokument oder die Layouteigenschaften (z. B. die Ausmaße) angezeigt oder der entsprechende DOM-Bereich für das ausgewählte Element hervorgehoben – je nachdem, welcher untergeordnete Menüpunkt im rechten Fenster aktiv ist.

Somit kann man sehr schnell erkennen, wo der Schuh drückt, das Problem lösen und sich angenehmeren Sachen im Leben widmen, z. B. der Familie oder einer Runde "Herr der Ringe Online".

Der Menüpunkt "CSS" bietet dir die Möglichkeit, die CSS-Dateien der Website zu beobachten und zu bearbeiten.

Der Menüpunkt "Skript" ermöglicht es, die eingebundenen JavaScript-Dateien zu beobachten und zu bearbeiten. Genau wie bei dem Hauptpunkt "HTML" hat man auch hier die komfortable Drei-Fenster-Ansicht. Leider fehlt für die Ansicht von JavaScript eine Syntaxhervorhebung, dafür gibt es wiederum eine Zeilennummerierung des Codes.

Unter dem Hauptpunkt "Netzwerk" wird, sofern aktiviert, die Netzwerkaktivität überwacht und in Form einer Tabelle in ihre einzelnen Bestandteile aufgeschlüsselt: das einzelne geladene Element, der HTTP-Statuscode, die Quelle, die Dateigröße und die Antwortzeit. Du kannst die Netzwerkaktivitäten auch nach einzelnen Dateitypen beobachten, zur Auswahl stehen dabei HTML, CSS, JavaScript, XHR (nützlich für Ajax-Debugging), Bilder und Flash-Dateien.

Wenn es dir nicht gefällt, dass Firebug sich am unteren Ende des Browserfensters positioniert, dann klicke auf den mittleren roten Button (zwei übereinander liegende Fenster) auf der rechten Seite und Firebug wird sich in einem neuen Fenster öffnen.

Diesen Artikel weiterempfehlen:

8 Reaktionen auf diesen Beitrag »»

Kommentare

Manuel sagte am
21. Dezember 2009 um 10:31 folgendes:

Was noch ev interessant ist, es gibt auch widerbug
Bei Widerbug wird Firebug nicht am unteren Seitenende aufgeklappt sondern auf der Seite, was bei Widescreens ziemlich angenehm ist

Wollte ich nur kurz erwähnen

Antworten
Perun sagte am
21. Dezember 2009 um 11:10 folgendes:

@manuel,

das wäre mein nächster bzw. übernächster Artikel gewesen.

Antworten
Manuel sagte am
21. Dezember 2009 um 11:40 folgendes:

hoppla

Antworten
Bernd sagte am
30. Dezember 2009 um 01:32 folgendes:

Firebug: dem Webworker seine liebste Feuerwanze
Der Genitiv ist dem Dativ sein Tod empfiehlt
Firebug: des Webworkers liebste Feuerwanze
(Siehe auch: Der Schuh des Manitou anstelle von
Dem Manitou sein Schuh)

Antworten
- Perun sagte am
  30. Dezember 2009 um 03:00 folgendes:
  
  Lieber ~~Deutschlehrer~~ Bernd,
  
  bitte lesen:
  
  Ursprung von: "Dem Webworker seine Werkzeugkiste"
  
  Antworten

Webwork-Tools - Dem Webworker seine Werkzeugkiste