Console

Das Console-Objekt bietet Zugriff auf die Debugging-Konsole des Browsers (z. B. die Web-Konsole in Firefox). Die Funktionsweise unterscheidet sich im Detail von Browser zu Browser, aber es gibt de facto eine Menge von Funktionen, die üblicherweise zur Verfügung stehen.

Das Console-Objekt kann von jedem globalen Objekt erreicht werden, über Window bei der Anzeige von Webseiten oder über WorkerGlobalScope und seine speziellen Varianten in Workers.

Diese Seite dokumentiert die Methoden, die das console-Objekt bietet und gibt ein paar Beispiele zur Verwendung.

Methoden

Console.assert()

Protokolliert eine Nachricht und den Stacktrace in die Konsole, wenn das erste Argument false ergibt.

Console.clear()

Leert die Konsole.

Console.count()

Protokolliert, wie häufig diese Zeile mit dem angegebenen Label aufgerufen wurde.

Console.debug()

Alias für log().

Console.dir()

Zeigt eine interaktive Auflistung der Eigenschaften des angegebenen JavaScript-Objekts. Die Auflistung bietet Dreiecksymbole, um die Inhalte von untergeordneten Objekten zu untersuchen.

Console.dirxml()

Zeigt eine XML/HTML-Element-Repräsentation des angegebenen Objekts an, sofern möglich, oder andernfalls die JavaScript-Objektanzeige.

Console.error()

Gibt eine Fehlermeldung aus. Die Methode unterstützt String-Ersetzungen und weitere Argumente.

Console.exception()

Alias für error().

Console.group()

Erstellt eine neue Inline-Gruppe, die alle folgenden Ausgaben um eine Ebene einrückt. Um eine Ebene weniger einzurücken, wird groupEnd() aufgerufen.

Console.groupCollapsed()

Erstellt eine neue Inline-Gruppe, die alle folgenden Ausgaben um eine Ebene einrückt, die Gruppe im Gegensatz zu group() zunächst zugeklappt ist, sodass diese zunächst mit dem Aufklappsymbol erweitert werden muss. Mit groupEnd() wird die Gruppe abgeschlossen.

Console.groupEnd()

Beendet die aktuelle Inline-Gruppe.

Console.info()

Gibt eine informative Logmeldung aus. Die Methode unterstützt String-Ersetzungen und weitere Argumente.

Console.log()

Gibt allgemeine Logmelden aus. Die Methode unterstützt String-Ersetzungen und weitere Argumente.

Console.profile()

Startet den Browser-eigenen Profiler (zum Beispiel die Firefox-Laufzeitanalyse). Optional kann ein Name für die Messung angegeben werden.

Console.profileEnd()

Beendet den Profiler. Das Ergebnis kann im Performance-Werkzeug des Browsers angezeigt werden (zum Beispiel die Firefox-Laufzeitanalyse).

Console.table()

Zeigt Daten in tabellarischer Form an.

Console.time()

Startet einen Timer mit einem Namen als Eingabeparameter. Bis zu 10.000 gleichzeitige Timer können auf einer bestimmten Seite laufen.

Console.timeEnd()

Stoppt den angegebenen Timer und protokolliert die vergangene Zeit seit seinem Start.

Console.timeStamp()

Fügt eine Markierung in die Zeitleisten- oder Wasserfall-Anzeige des Browsers hinzu.

Console.trace()

Gibt einen Stacktrace aus.

Console.warn()

Gibt eine Warnmeldung aus. Die Methode unterstützt String-Ersetzungen und weitere Argumente.

Verwendung

Text in der Konsole ausgeben

Die am häufigsten verwendete Funktion der Konsole ist die Protokollierung von Text und anderen Daten. Es gibt vier Arten von Ausgaben, die mit den Methoden console.log(), console.info(), console.warn(), und console.error() erfasst werden können. Jede Art ergibt eine unterschiedliche Darstellung im Protokoll und ermöglicht eine Filterung nach bestimmten Ausgaben.

Es gibt zwei Wege die Ausgabe-Methoden zu verwenden. Es kann einfach eine Liste von Objekten übergeben werden, deren String-Repräsentation zu einem String konkateniert und dann in die Konsole ausgegeben wird, oder es kann ein String mit ein oder mehreren Ersetzungsmarken übergeben werden und eine Liste von Objekten, die diese ersetzen.

Einzelne Objekte ausgeben

Der einfachste Weg, die Protokollierungsmethoden zu verwenden, besteht darin, ein einzelnes Objekt auszugeben:

var einObjekt = { str: "Etwas Text", id: 5 };
console.log(einObjekt);

Die Ausgabe sieht etwa so aus:

[09:27:13.475] ({str:"Etwas Text", id:5})

Mehrere Objekte ausgeben

Es können auch mehrere Objekte ausgegeben werden, indem beim Aufruf der Protokollierungsmethode die Objekte einfach als Parameter übergeben werden, so wie hier:

var auto = "VW Golf";
var einObjekt = {str:"Etwas Text", id:5}; 
console.info("Mein erstes Auto war ein", auto, ". Das Objekt ist: ", einObjekt);

This output will look like this:

[09:28:22.711] Mein erstes Auto war ein VW Golf . Das Objekt ist:  ({str:"etwas Text", id:5})

String-Ersetzungen verwenden

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) hat Unterstützung für String-Ersetzungen eingeführt. Wenn ein String an eine Methode des Console-Objekts übergeben wird, die einen String akzeptieren, kann eine der folgenden Ersetzungsmarken verwendet werden:

Jede dieser Marken übernimmt den nächsten Wert in der Argumentliste. Zum Beispiel:

for (var i=0; i<5; i++) {
  console.log("Hallo, %s. Du hast mich %d-mal aufgerufen.", "Bob", i+1);
}

Die Ausgabe sieht dann so aus:

[13:14:13.481] Hallo, Bob. Du hast mich 1-mal aufgerufen.
[13:14:13.483] Hallo, Bob. Du hast mich 2-mal aufgerufen.
[13:14:13.485] Hallo, Bob. Du hast mich 3-mal aufgerufen.
[13:14:13.487] Hallo, Bob. Du hast mich 4-mal aufgerufen.
[13:14:13.488] Hallo, Bob. Du hast mich 5-mal aufgerufen.

Konsolen-Ausgabe anpassen

Die "%c"-Direktive ermöglicht es, einen CSS-Stil auf die Konsolenangabe anzuwenden:

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

Geschachelte Gruppen können verwendet werden, um bei der Organisierung der Ausgabe zu helfen, indem zugehöriges Material visuell kombiniert wird. Ein geschachtelter Block wird mit console.group() begonnen. Die console.groupCollapsed()-Methode ist ähnlich, klappt den Block jedoch zu, sodass dieser bei Bedarf aufgeklappt werden kann.

Die aktuelle Gruppe kann mit console.groupEnd() abgeschlossen werden. Betrachten wir beispielsweise diesen Code:

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

Dann sieht die Ausgabe so aus:

Um die Laufzeit einer bestimmten Operation zu berechnen,  hat Gecko 10 im console-Objekt die Unterstützung für Timer eingeführt. Ein Timer kann mit der Methode console.time() gestartet werden, der ein Bezeichner als einziger Parameter übergeben wird. Um den Timer wieder zu stoppen und die verstrichene Zeit in Millisekunden zu erhalten, muss die Methode console.timeEnd() mit dem gleichen Bezeichner aufgerufen werden. Auf einer Seite können bis zu 10.000 Timer gleichzeitig ausgeführt werden.

Das folgende Beispiel:

console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

wird die Zeit protokollieren, die die Benutzerin bis zum Schließen der Meldung braucht:

Beachte, dass der Bezeichner des Timers sowohl beim Start als auch beim Stop des Timers angezeigt wird.

Stacktraces

Das console-Objekt unterstützt auch die Ausgabe eines Stacktraces; dieser wird den Aufrufpfad bis zum Punkt anzeigen, an dem console.trace() aufgerufen wurde. Nehmen wir etwa diesen Quelltext:

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

Die Ausgabe in der Konsole sieht dann so aus:

Spezifikation

Console-Objekt-API

Anmerkungen

• Zumindest in Firefox kann eine Seite, die ein console-Objekt definiert, das in Firefox eingebaute Objekt überschreiben.
• Vor Gecko 12.0 funktionierten die Methoden des console-Objekts nur, wenn die Konsole geöffnet war. Seit Gecko 12.0 wird die Ausgabe zwischengespeichert bis die Konsole geöffnet wird, und dann angezeigt.
• Das in Firefox eingebaute console-Objekt ist kompatibel mit dem von Firebug.

Siehe auch

• Firefox Tools für Webentwickler
• Web-Konsole — wie die Web-Konsole in Firefox console-API-Aufrufe behandelt
• Remote-Debugging — wie die Konsolenausgabe angezeigt werden kann, wenn das Debugging sich auf ein mobiles Gerät bezieht

Andere Implementierungen

• Google Chrome DevTools
• Firebug
• Internet Explorer
• Safari