Webwork-Tools - Dem Webworker seine Werkzeugkiste



Firebug: dem Webworker seine liebste Feuerwanze

Von am 16. Dezember 2009 um 18:26 Uhr

Firebug (Logo) 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

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:

Verwandte Artikel:

Eigenwerbung: unsere Bücher (WordPress und Webwork-Tools)

 — 

9 Kommentare zu “Firebug: dem Webworker seine liebste Feuerwanze”

  1. […] habe gestern Firebug beschrieben: das Firefox-Addon, wenn es darum geht Fehler auf Websites zu finden und zu beheben. In […]

  2. Manuel sagt:

    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 :)

  3. Perun sagt:

    @manuel,

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

  4. Bernd sagt:

    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)

  5. […] 16:9-Verhältnis haben. Besitzer solcher Monitore wird es interessieren zu wissen, dass es für Firebug eine Erweiterung mit dem Namen Widerbug gibt. Diese Erweiterung optimiert Firebug für solche […]

  6. […] wollte ich über CodeBurner als Erweiterung von Firebug schreiben. Den Firebug habe ich bereits in einem anderen Artikel hier im Weblog beschrieben. Für diejenigen, die es nicht kennen: es handelt sich um ein sehr […]

  7. […] ist eine Erweiterung für Firebug, mit der man den DOM-Baum recht gut veranschaulichen kann. Hier ein Ausschnitt: Ausschnitt des […]