M-Software.de Blog

Auf  die Firebug Console API kann man zugreifen, sobald im Browser das FireBug Plugin installiert ist. Bei dem Firebug Plugin für den Firefox handet es sich um ein Plugin für Webmaster, Webdesigner und andere Entwickler von Webseiten, Online Tools, Online Shops etc. Die aktuelle Version von Firebug kann man von der Webseite https://addons.mozilla.org/de/firefox/addon/1843 aus Installieren.

Einmal installiert, steht dem Entwickler eine globale Variable „console“ in allen Webseiten im Firefox zur Verfügung. Dieses Objekt enthält die Methoden über die es möglich ist, die Firebug Konsole anzusprechen und Log Ausgaben zu erzeugen. So ist es eine leichte Übung, eine Log Ausgabe auf der Firebug Konsole auszugeben.

console.log(”Ich bin eine einfache Log Ausgabe”);

 

Die Firebug Konsole wird so zu einem mächtigen Verbündeten bei der Suche von Fehlern in Programmen.

 

 

Firebug Console Methoden

console.log(object[, object, ...])

Mit console.log kann man einen Text auf der Konsole ausgeben lassen. Der Methode console.log kann man beliebig viele Argumente übergeben. Die Argumente werden dann analog der printf Funktion verarbeitet.

Beispiel:

var anz = 200;

var flowers = “Blumen”;

console.log(”In meinem Garten stehen %d %s.”, anz, flowers);

Ausgabe:

In meinem Garten stehen 200 Blumen.

Diese Schreibweise kommt aus der Programmiersprache C aus den 80ern. Das es in JavaScript noch immer so gemacht wird, kann nur bedeuten, es ist eine erfolgreiche Lösung

für ein simples Problem. Wem die Schreibweise trotzdem nicht gefällt, der kann die gleiche Ausgabe mit folgendem Code erzeugen.

Beispiel:

var anz = 200;

var flowers = “Blumen”;

console.log(”In meinem Garten stehen “, anz , ” “, flowers, “.”);

Ich persönlich kann die obere Variante besser lesen. Doch ist das noch nicht verwirrend genug, kann man die beiden Varianten noch kombinieren. Das sollte man aber nur tun, wenn man dafür einen triftigen Grund hat.In d

String	Erklärung
%s	String
%d, %i	Integer (numeric formatting is not yet supported)
%f	Floating point number (numeric formatting is not yet supported)
%o	Object hyperlink

Strings die man verwenden kann.

Neben der console.log Methode gibt es noch weitere Methoden zum Ausgeben von Text in der Firebug Konsole. Die Methoden funktionieren genauso wie die console.log Methode und unterscheiden sich nur durch die Darstellung der Zeilen. Die Ausgaben die mit warn, error und info gemacht werden, erhalten eine Farbe und ein Icon, um sie schneller zu finden und die relevanten Infos schneller vor Augen zu haben.

Das obige Beispiel verwendet die Methoden consolelog(), console.debug(), console.info(), console.warn() und console.error() auf die folgende Art und Weise:

console.log   (”console.log()”);
console.debug (”console.debug()”);
console.info  (”console.info()”);
console.warn  (”console.warn()”);
console.error (”console.error()”);

Die 5 Methoden eignen sich hervorragend, um ein Logging mit dem FireBug Plugin zu realisieren. Besonders interessant ist die Tatsache, dass bei einer geschlossenen Firebug Konsole in der Statuszeile des Browsers eine Zusammenfassung der Fehler angezeigt wird. In dem obigen Beispiel „1 Fehler“. So hat man immer einen Überblick über den Status der Anwendung. Auch wenn man die Firebug Konsole gerade geschlossen hat.

Neben den 5 Methoden gibt es noch eine Reihe von weiteren Möglichkeiten, mit der die Firebug Konsole sinnvoll ergänzt werden kann.

 

console.assert(expression[, object, ...])

Prüft einen Ausdruck auf true. Ist die Expression false, werden die Objekte ausgegeben und eine Exception geworfen. Ich selbst nutze diese Funktion nicht. Im Test habe ich nur den Fehler „trace.frames is undefined“ in Zeile 294 der Datei consoleInjector.js bekommen. Evtl. ein  ode rich habe was falsch gemacht.

console.dir(object)

Listet das Objekt mit allen eigenschaften des DOM Baums auf. Es ist möglich in den DOM Baum hinein zu navigieren und dort das Objekt im Detail zu analysieren. Eine genale Möglichkeit sich mal detailiert mit einem Objekt zu befassen.

Beispiel:

console.dir(console)

console.dirxml(node)

Mit console.dirxml ist es möglich, ausgewählte HTML oder XML Nodes ausgeben zu lassen. Die Ausgabe entspricht der Ausgabe im HTML Tab. Es ist möglich durch die Elemente zu navigieren und Eigenschaften zu analysieren. Gleichzeitig wird das momentan aktive Element in dem Elemente-Tree im Browserfenster farblich hinterlegt, wenn es ein Element ist, dass auf der Webseite angezeigt wird.

Beispiel:

<html>
     <head>
         <title>FireBug Console Test</title>
         <script>
         function do()
         {
              var node = document.getElementById(”mybody”);
              console.dirxml(node);
         }
         </script>
     </head>
     <body onload=”do()”>
         <h1>Titel</h1>
         <div>Dies ist ein DIV Element.</div>
     </body>
</html>

Die Ausgabe des obigen Beispiels erzeugt folgenden interaktiven Tree in der Firebug Konsole.

console.trace()

Der Befehl console.trace erzeugt einen interaktiven Tree in der Firebug Konsole, der dem aktuellen Stack Trace entspricht. Dieser Befehl ist sehr nützlich, wenn es darum geht, zu prüfen, woher die Methode aufgerufen wurde. Ich nutze diese Funktion nicht so oft. Im Test habe ich immer nur den Fehler “Firebug failed to get stack trace with any frames” erhalten. Wenn man trotzdem mal einen Stack Trace braucht, kann man aber auch ohne Probleme mit dem Debugger arbeiten. Hier wird der Stack Trace korrekt angezeigt.

Hinweis: Die Ausführung des Codes wird durch den Aufruf nicht unterbrochen. Es geht alles ganz normal weiter. Nur die Ausgabe in der Firebug Konsole wird erzeugt. Danach läuft der Code ohne Unterbrechung einfach weiter.

console.group(object[, object, ...]) & console.groupEnd()

Mit console.group  und console.groupEnd kann man Ausgaben in der Firebug Konsole gruppieren. Durch die Gruppierung wird ein interaktiver Tree erzeugt, in dem die Ausgaben gruppiert werden. Dies ist sehr hilfreich, wenn man sehr umfangreiche Ausgaben erzeugt, und einige Teile einfach ausblenden möchte oder wenn die Ausgaben in Gruppen zusammengehören und diese Gruppierung in der Konsole dargestellt werden soll. Die Gruppierungstiefe der mit console.group erzeugten Ebenen ist unbegrenzt, allerdings sollte man ein wenig Zeit haben, wenn man z.B. die Aufrufstruktur einer rekursiven Funktion abbilden möchte bei der die Rekursion > 100 ist.

Wichtig: Jede Gruppe muss mit dem Befehl console.groupEnd()wieder geschlossen werden.

Beispiel:

console.info (”Info 1″);
console.group(”Start 1″);
console.group(”Start 2″);
console.warn (”Warnung”);
console.groupEnd();
console.groupEnd();
console.info (”Info 2″);

Der obige JavaScript Code erzeugt in der Firebug Konsole folgende Ausgaben.

Hier ist eine Warnung innerhalb der Gruppe „Start 2“ und die Gruppe „Start 2“ ist innerhalb der Gruppe „Start 1“. Die beiden Infos sind außerhalb der beiden Gruppen.

console.time(name) & console.timeEnd(name)

Die Methoden console.time und console.timeEnd sind dazu da, die Zeit zwischen den beiden Aufrufen zu messen.

Beispiel:

var name = “Timer 1″;
console.info(”Start”);
console.time(name);
console.group(”Info”);
for (i = 0; i < 100; i++) console.info(”Info nr.” + i);
console.groupEnd();
console.timeEnd(name);
console.info(”Ready”);

Der obige Code erzeugt folgende Ausgabe:

Der „Timer 1“ hat eine Teit von 167 ms gemessen. Das ist die Zeit, die der Browser benötigt hat, um 100 info Zeilen auszugeben und eine Gruppierung um die Info Zeilen zu erzeugen. In dem Beispiel kann man auch sehr gut sehen, dass durch die Log-Ausgaben nur geringe Performanceeinbußen zu erwarten sind, wenn man das Logging nicht übertreibt.

Es ist möglich mehrere überlappende Timer zu erstellen. Es ist nur darauf zu achten, dass die Timer einen eindeutigen Namen haben, der sowohl beim Start als auch beim Beenden des Timers identisch ist.

console.profile([title]) & console.profileEnd()

Aktiviert oder deaktiviert den JavaScript Profiler. Der optionale Parameter “title” enthält den Titel unter dem der Profiler gestartet wird. Der Titel des Profilers wird auch in der Firebug Konsole ausgegeben. Ich persönlich nutze den Profiler nicht. Es liegt wohl an meiner Arbeitsweise. Ich bevorzuge eher ein gutes Logging.

console.count([title])

Ein wunderbares Feature ist die Funktion console.count, mit der es möglich ist, die Anzahl der Aufrufe zählen zu lassen. Die Methode zählt die Anzahl der Aufrufe mit dem gleichen Titel und gibt dann die Anzahl der Aufrufe in der Konsole aus:

Beispiel:

var name = “Timer 1″;
console.info(”Counter Start”);
for (i = 0; i < 100; i++) console.count(”Counter: “);
console.info(”Counter Ready”);

Firebug is a registered trademark of Parakey, Inc.