[:en]Firebug: logging features[:de]Firebug: Logfunktionen

[:en]Many developers think of Firebug as the mother of all web tools. There’s a reason for it, because Firebug contains sophisticated tools to do nearly everything you need being a web developer, starting with little css experiments, debugging complex jscript-applications, profiling of web pages and many more.

Not commonly known is how to create your own logs using JScript.

For example, …
[javascript]
console.log(‚Hello World!‘);
[/javascript]
prints exactly this in your Firebug console.

You can refine this, since most of you distinguish informations, warnings, errors and debug output.

[javascript]
console.debug(‚Debug‘);
console.info(‚Information‘);
console.warn(‚Warning‘);
console.error(‚Error‘);
[/javascript]

Debugging variables can be helped, too.

[javascript]
var banana = 1.234;
var orange = "Test";
console.log("my %a has the value %d", orange, banana);
[/javascript]

If you have the need to group log output, just do it like this:

[javascript]
console.group(‚myGroup‘);
console.info(‚Info1‘);
console.debug(‚What did I want to know?‘);
console.groupEnd();
[/javascript]

Even more features, p.e. timing values, stacks and so on, are documented here.

By the way:
Most of these features have already found their way into the debugger used by Google Chrome!

[:de]Viele Entwickler betrachten Firebug als die Mutter aller Web-Tools. Diese Ansicht ist durchaus begründet, denn Firebug umfassst mächtige Werkzeuge, mit welchen man so ziemlich alles machen kann, was man als Webentwickler so täglich braucht, angefangen von kleineren CSS-Experimenten bishin zum Debuggen von komplexen JScript-Anwendungen sowie dem Profiling von Webseiten.

Was nicht ganz so bekannt ist, man kann sogar über den Firebug aus JScript heraus Debug-Logs generieren.

Beispielsweise gibt…
[javascript]
console.log(‚Hallo Welt!‘);
[/javascript]
…genau diesen Text in der Konsole aus.

Das kann man noch etwas verfeinern, denn schließlich unterscheidet man Infos, Warnings, Errors und Debugs!
[javascript]
console.debug(‚Debug‘);
console.info(‚Information‘);
console.warn(‚Warnung‘);
console.error(‚Fehler‘);
[/javascript]

Und auch die Ausgabe von Variablen kommt nicht zu kurz:
[javascript]
var banane = 1.234;
var orange = "Test";
console.log("Mein %a hat den Wert %d", orange, banane);
[/javascript]

Ästheten können auch Gruppen bilden, welche in der Konsole sauber dargestellt werden:
[javascript]
console.group(‚meine Gruppe‘);
console.info(‚Info1‘);
console.debug(‚Was ich wissen wollte…‘);
console.groupEnd();
[/javascript]
Über noch mehr Möglichkeiten dieser Funktionen, wie z.B. Zeitwerte, Stacks u.s.w kann man sich hier auf der Seite von Firebug informieren.

Übrigens:
Die meisten dieser Funktionen sind mittlerweile auch im Debugger des Google Chrome verfügbar!