Hilfe für den Web-Entwickler: Firebug

Ich habe eine neue Kategorie angelegt, in der ich nach und nach meine Browser Addons zum Entwickeln von Webseiten vorstellen möchte. Den Anfang macht dabei das Über-Addon schlechthin, quasi das schweizer Armeemesser unter den Web-Programmieren: Firebug für Mozillas Firefox.

Was ist nun Firebug? Diese Frage lässt sich in einem einzigen Satz gar nicht so leicht beantworten. Firebug bringt ein eigenes Fenster mit, dass sich entweder als Framedock unterhalb der aktuellen Seite oder in einem eigenständigen Fenster öffnen lässt. Dieses Fenster bietet unterschiedliche Reiter, die ich kurz anreißen möchte:

Konsole
Die Konsole zeigt standardmäßig erst mal „nur“ JavaScript-Fehler an, wie es auch die hauseigene Firefox-Konsole mit dem deutschen Namen „Fehlerkonsole“ tut. Darüber hinaus erweitert der Firebug die JavaScript-API des Firefox aber so weit, dass man mittels einfacher JavaScript-Methodenaufrufe in die Konsole schreiben kann. Vorbei sind die Zeiten, in denen man von alert()-Fenster tot geblubbert wurde! Ein einfaches

console.log("hai!");

reicht aus und in der Konsole erscheint die Ausgabe. Firebug bringt viele von diesen neuen Methoden unterhalb des Console-JavaScript-Objekts mit, u.a. console.debug() und console.warn().

Der Konsole-Reiter von Firebug

Eine der tollsten Eigenschaften der Konsole ist die Eingabemöglichkeit, die es einem erlaubt, in dem aktuellen JavaScript-Kontext der Seite JavaScript auszuführen. Wenn man sich mit jQuery-Selektoren basteln will, ist das eine Primahilfe!

Als wäre das nicht genug, präsentiert einem die Konsole auch noch alle AJAX-Requests, die zur Laufzeit der Seite abgesetzt werden. Diese Requests komplett detailliert dargesellt, so dass man die POST-Parameter, die Anfrage- und Antwort-Header und natürlich die Serverantwort analysieren kann.

HTML
Hinter diesem Reiter verbirgt sich der Live-DOM der aktuellen Webseite. Und mit Live meine ich Live! ;) Hier sietht man alle Änderungen, die nachträglich durch JavaScript vorgenommen wurden und kann selber Änderungen vornehmen, ohne am eigentlichen Quelltext zu arbeiten. Außerdem bekommt man in einem Zusatzfenster noch u.a. die aktuellen CSS-Anweisungen für das markierte DOM-Element angezeigt und kann sogar sehen, welche Eigenschaften durch welche Anweisung überschrieben wurden. Darüberhinaus sind auch noch weitere Informationen über das Box-Modell und errechnete CSS-Eigenschaften abzulesen.

Eines der praktischsten Features von Firebug ist der „Inspector„, der ebenfalls hier verankert ist. Wählt man ihn aus, kann man mit dem Mauszeiger über die gerenderten Elemente der Webseite fahren und bekommt im Firebug-Fenster die entsprechenden DOM-Elemente angezeigt. Das erspart einem richtig viel Arbeit!

CSS
Unter diesem Reiter kann man alle CSS-Anweisungen anschauen, die auf der aktuellen Seite geladen sind. Man kann auch zwischen Inline-CSS und einzelnen CSS-Dateien wählen und diese betrachten.

Skript
Im Prinzip das gleiche wie bei CSS, alle geladenen JavaScript-Skripte werden zur Auswahl präsentiert. Darüberhinaus lässt sich praktisch filtern, ob man z.B. nur „statische Skripte“ oder „eval()-Skripte“ angezeigt haben möchte. Darüber hinaus erlaubt es einem der Skript-Tab auch Haltepunkte im JavaScript zu setzen! Das ist verdammt praktisch, da man beim Debuggen an beliebiger Stelle im Code einen Haltepunkt setzen und die aktuellen Inhalte von Variablen inspizieren kann.

DOM
Der Reiter DOM wartet mit allen JavaScript-Objekten und dazugehörigen Eigenschaften auf, die in der aktuell gerenderten Seite vorliegen. Wie bei allen Firebug-Dingen handelt es sich dabei natürlich um eine Live-Sicht der Dinge. Das bedeutet, dass hier Änderungen vorgenommen werden können und sich wiederum Änderungen an anderer Stelle auch hier sofort erkenntlich zeigen.

Netzwerk

Der Netzwerk-Reiter des Firebug

Der Netzwerk-Tab listet alle Dateien auf, die zum Laden der aktuellen Seite erforderlich sind; und zwar in der Reihenfolge und mit der Geschwindigkeit, mit der sie geladen wurden! Hier hat man eine fantastische Übersicht über allle Dateien, die geladen werden. Man kann sofort erkennen (durch eine rote Markierung), ob Dateien geladen werden sollen, diese aber nicht auf dem Server gefunden wurden (404-Error). Außerdem kann man, wie bei der Konsole, alle Requests im Detail anschauen, also bei jeder Datei können Anfrage- und Antwort-Header untersucht werden, die Antwort des Servers, ggf. die POST-Parameter, uswusf.
Wer nachsehen möchte, wie groß alle Elemente sind, die man zum Laden der Seite wirklich braucht (und eben nicht nur die reine HTML-Seite), der bekommt hier eine Superdarstellung.

Hiermit habe ich das Thema „Firebug“ hoffentlich gut anschneiden können. Ich habe definitiv nicht alle Funktionalitäten angesprochen, die diese Software mitbringt, aber ich denke, dass ich einen guten Einblick geben konnte.

In den folgenden Artikeln werde ich noch weitere Firebug-Addons (also Addons zum Addons ;)) vorstellen, die weitere Features und Komfortabilitäten bringen.

Der Firebug lässt sich von Mozillas Plugin-Verzeichnis aus oder direkt von der Hersteller-Website installieren.

War dieser Artikel hilfreich für Sie?
[Gesamt: 0 Durchschnitt: 0]

2 thoughts on “Hilfe für den Web-Entwickler: Firebug

  1. Sorry – ich bin augenscheinlich zu doof – das temporäre Editieren in Firebug geht problemlos,aber teilweise finde ich die Dateien nicht, in denen ich schließlich die endgültige Änderung vornehmen muss. Die .css-Dateien werden mit Zeilennummer namentlich genannt, da ist es nicht so schwierig, aber welche .html, .xml oder .php Dateien Firebug just anzeigt wird mir oft einfach nicht klar. Ich meine oft, die Stelle gefunden zu haben, editiere sie, aktualisiere den Browser und – nothing happens …
    Was mache ich nur falsch – es ist mit Sicherheit ein ziemlich dämlicher Fehler meinerseits, oder? … freue mich auf Deine/Eure Hilfe.

  2. Ronald sagt:

    Hallo JoomDocCologne,
    um die richtige Stelle bei Inline-Code zu finden ist es vermutlich am hilfreichsten, du nimmst die Zeilennummer, die der Firebug dir sagt, und gehst dann in der „Web Developer Toolbar“ (NICHT Firebug!) auf „View Source“ und dann „View Generated Source“. Dann bekommst du den Quelltext der aktuellen Seite angezeigt, wie der Browser ihn aus JavaScripten und dem eigentlichen HTML vom Server zusammengebaut vorhält. Darin solltest du mit der Zeilennummer vom Firebug auch die tatsächliche Stelle finden und kannst analysieren, wo die in deiner Programmierung herkommt.
    Eine generelle Empfehlung von mir ist, soweit wie irgendwie möglich auf Inline-JavaScript- und CSS-Code zu verzichten und immer alles in externe Dateien auszulagern. Mit übersichtlichen CSS-Selektoren sollte das eigentlich auch problemlos möglich sein, auch wenn es erst mal wie Mehraufwand erscheint, holen ein die Inline-Probleme wie in deinem Fall schnell ein.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *