Quick Win of the Week: Log-Ausgaben mit Firebug und console.log

Firebug ist ein Add-on, welches aus der heutigen Frontend-Entwicklung nicht mehr wegzudenken ist. Es bietet unzählige Features, welche sich breit gefächert über WYSIWYG-DOM-Manipulation bis hin zur formatierten Anzeige von CSS erstrecken.

Besonders hervorheben möchte ich die Möglichkeit, mit diesem Firefox-Add-on die Browser-Consolen-Meldungen abzufangen, zu erweitern und übersichtlicher, also gebündelt und gefiltert, anzuzeigen.

Die Firebug-Console zeigt neben Fehlern und Warnungen nämlich auch Nachrichten an, welche sich über Javascript erzeugen lassen. Vorteil: Bessere Callbacks, detailierte Debug-Ausgaben uvm.

Stellen wir uns folgenden Fall vor:

Wir möchten in einem Container mit jQuery mehrere Objekte mit der gleichen CSS-Klasse finden…

html

javascript (jQuery)

$(div).find('.foo');

- dann gibt uns jQuery ein Array (gefüllt mit den Elementen, die gefunden wurden) zurück, welches sich über den Befehl console.log in der Firebug-Console detailiert ausgeben lässt:

console.log($(div).find('.foo'));

Wenn alles gut gegangen ist, sollte jetzt in der firebug-console folgendes erscheinen:

Mit diesen Daten lässt sich jetzt beliebig weiterarbeiten. Klicke ich beispielsweise auf eines der Elemente in der Console, springt Firebug in die “HTML”-Ansicht und hebt das selektierte Element hervor. Dies stellt beim Debuggen eine echte Bereicherung dar, da ich so auch fehlerhaft selektierte Objekte leichter finden und bearbeiten kann.

Die Funktion gibt ebenfalls Strings à la “Hallo Welt” oder Variablen problemlos an Firebug weiter. Sehr nützlich für Debug-Ausgaben, Zeitmessungen oder Informationen.

Was passiert bei ausgeschaltetem oder nicht vorhandenem Firebug?

Große Falle: Euer Javascript wird nicht mehr richtig funktionieren, da der Funktionsaufruf console.log bei deaktivierter Console “undefined” zurückgibt. Wie Ihr diesem Fall aus dem Weg geht und euch etwas Schreibarbeit sparen könnt, findet ihr hier.

Ist console.log schon das Ende der Fahnenstange?

Nein. Hier findet Ihr die komplette Liste aller Ausgabemöglichkeiten über Firebug.