console

Instanzmethoden

console.assert()

Gibt eine Fehlermeldung in der Konsole aus, wenn das erste Argument false ist.

console.clear()

Leert die Konsole.

console.count()

Gibt aus, wie oft diese Zeile mit dem angegebenen Label aufgerufen wurde.

console.countReset()

Setzt den Wert des Zählers mit dem angegebenen Label zurück.

console.debug()

Gibt eine Nachricht mit dem Log-Level „Debug“ in der Konsole aus.

console.dir()

Zeigt eine interaktive Liste der Eigenschaften eines angegebenen JavaScript-Objekts an. Über Aufklappdreiecke können Sie den Inhalt untergeordneter Objekte untersuchen.

console.dirxml()

Zeigt nach Möglichkeit eine XML-/HTML-Elementdarstellung des angegebenen Objekts an, andernfalls eine JavaScript-Objektansicht.

console.error()

Gibt eine Nachricht mit dem Log-Level „Fehler“ in der Konsole aus.

console.exception()

Ein Alias für console.error().

console.group()

Erstellt eine neue Inline-Gruppe und rückt alle folgenden Ausgaben um eine weitere Ebene ein. Um eine Ebene zurückzugehen, rufen Sie console.groupEnd() auf.

console.groupCollapsed()

Erstellt eine neue Inline-Gruppe und rückt alle folgenden Ausgaben um eine weitere Ebene ein. Anders als bei console.group() ist die Inline-Gruppe zunächst eingeklappt und muss über eine Aufklappschaltfläche erweitert werden. Um eine Ebene zurückzugehen, rufen Sie console.groupEnd() auf.

console.groupEnd()

Verlässt die aktuelle Inline-Gruppe.

console.info()

Gibt eine Nachricht mit dem Log-Level „Info“ in der Konsole aus.

console.log()

Gibt eine Nachricht in der Konsole aus.

console.profile()

Startet den integrierten Profiler des Browsers (z. B. das Firefox-Performance-Tool). Sie können optional einen Namen für das Profil angeben.

console.profileEnd()

Stoppt den Profiler. Das resultierende Profil können Sie im Performance-Tool des Browsers ansehen (z. B. im Firefox-Performance-Tool).

console.table()

Zeigt tabellarische Daten als Tabelle an.

console.time()

Startet einen Timer mit einem Namen, der als Eingabeparameter angegeben wird. Auf einer Seite können bis zu 10.000 Timer gleichzeitig laufen.

console.timeEnd()

Stoppt den angegebenen Timer und gibt die seit seinem Start verstrichene Zeit in Millisekunden aus.

console.timeLog()

Gibt den Wert des angegebenen Timers in der Konsole aus.

console.timeStamp()

Fügt einer Performance-Aufzeichnung in Entwicklertools, die dies unterstützen, eine Markierung hinzu. Aufzeichnung und Anzeige hängen vom Browser und vom Profiling-Tool ab.

console.trace()

Gibt einen Stack-Trace aus.

console.warn()

Gibt eine Nachricht mit dem Log-Level „Warnung“ in der Konsole aus.

Beispiele

Text in der Konsole ausgeben

Die am häufigsten genutzte Funktion der Konsole ist die Ausgabe von Text und anderen Daten. Mit den Methoden console.log(), console.info(), console.warn(), console.error() und console.debug() können Sie verschiedene Arten von Ausgaben erzeugen. Jede davon wird im Protokoll anders dargestellt. Mit den Filterfunktionen Ihres Browsers können Sie sich nur die Arten von Ausgaben anzeigen lassen, die Sie interessieren.

Jede der Ausgabemethoden lässt sich auf zwei Arten verwenden:

• Übergeben Sie eine variable Anzahl von Argumenten, deren Zeichenfolgendarstellungen zu einer Zeichenfolge verkettet und anschließend in der Konsole ausgegeben werden.
• Übergeben Sie eine Zeichenfolge mit keiner oder mehreren Platzhalterzeichenfolgen, gefolgt von einer variablen Anzahl von Argumenten, durch die diese ersetzt werden.

Ein einzelnes Objekt ausgeben

Die einfachste Verwendung der Ausgabemethoden besteht darin, ein einzelnes Objekt auszugeben:

const someObject = { str: "Some text", id: 5 };
console.log(someObject);

Die Ausgabe sieht ungefähr so aus:

{str:"Some text", id:5}

Der Browser zeigt so viele Informationen über das Objekt an, wie er kann und möchte. Beispielsweise kann auch der private Zustand des Objekts angezeigt werden. Bestimmte Objekttypen, etwa DOM-Elemente oder Funktionen, können außerdem auf besondere Weise dargestellt werden.

Momentaufnahmen von Objekten

Informationen über ein Objekt werden erst bei Bedarf abgerufen. Das bedeutet, dass die Protokollnachricht den Inhalt eines Objekts zu dem Zeitpunkt zeigt, zu dem sie erstmals angezeigt wird, und nicht zu dem Zeitpunkt, zu dem sie protokolliert wurde. Zum Beispiel:

const obj = {};
console.log(obj);
obj.prop = 123;

Dies gibt {} aus. Wenn Sie jedoch die Objektdetails aufklappen, sehen Sie prop: 123.

Wenn Sie Ihr Objekt verändern und verhindern möchten, dass die protokollierten Informationen aktualisiert werden, können Sie vor der Ausgabe eine tiefe Kopie des Objekts erstellen. Eine übliche Vorgehensweise besteht darin, es mit JSON.stringify() zu serialisieren und anschließend mit JSON.parse() wieder einzulesen:

console.log(JSON.parse(JSON.stringify(obj)));

Es gibt weitere Alternativen, die in Browsern funktionieren, etwa structuredClone(). Sie eignen sich besser zum Kopieren unterschiedlicher Objekttypen.

Mehrere Objekte ausgeben

Sie können auch mehrere Objekte ausgeben, indem Sie sie beim Aufruf der Ausgabemethode nacheinander angeben:

const car = "Dodge Charger";
const someObject = { str: "Some text", id: 5 };
console.info("My first car was a", car, ". The object is:", someObject);

Die Ausgabe sieht dann so aus:

My first car was a Dodge Charger . The object is: {str:"Some text", id:5}

Zeichenfolgen-Platzhalter verwenden

Der erste Parameter der Ausgabemethoden kann eine Zeichenfolge mit keiner oder mehreren Platzhalterzeichenfolgen sein. Jede Platzhalterzeichenfolge wird durch den Wert des entsprechenden Arguments ersetzt.

%o

Gibt ein JavaScript-Objekt in einem „optimal nützlichen Format“ aus. Beispielsweise können DOM-Elemente so dargestellt werden, wie sie im Elementinspektor erscheinen.

%O

Gibt ein JavaScript-Objekt in einem „allgemeinen JavaScript-Objektformat“ aus, üblicherweise als aufklappbare Baumstruktur. Dies ähnelt console.dir().

%d oder %i

Gibt eine Ganzzahl aus.

%s

Gibt eine Zeichenfolge aus.

%f

Gibt eine Gleitkommazahl aus.

%c

Wendet CSS-Stilregeln auf den gesamten folgenden Text an. Siehe Konsolenausgaben gestalten.

Einige Browser unterstützen möglicherweise zusätzliche Formatangaben. Safari und Firefox unterstützen beispielsweise die Präzisionsformatierung im C-Stil %.<precision>f. So gibt console.log("Foo %.2f", 1.1) die Zahl mit zwei Nachkommastellen aus: Foo 1.10. Dagegen gibt console.log("Foo %.2d", 1.1) die Zahl zweistellig mit einer führenden 0 aus: Foo 01.

Jeder dieser Platzhalter verwendet das nächste Argument nach der Formatzeichenfolge aus der Parameterliste. Zum Beispiel:

for (let i = 0; i < 5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i + 1);
}

Die Ausgabe sieht so aus:

Hello, Bob. You've called me 1 times.
Hello, Bob. You've called me 2 times.
Hello, Bob. You've called me 3 times.
Hello, Bob. You've called me 4 times.
Hello, Bob. You've called me 5 times.

Konsolenausgaben gestalten

Mit der Direktive %c können Sie einen CSS-Stil auf eine Konsolenausgabe anwenden:

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

Der Text vor der Direktive bleibt unverändert. Der Text nach der Direktive wird anhand der CSS-Deklarationen im Parameter gestaltet.

Sie können %c mehrfach verwenden:

console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message",
);

Die folgenden Eigenschaften können mit der %c-Syntax verwendet werden (zumindest in Firefox – in anderen Browsern kann dies abweichen):

• background und die zugehörigen Einzeleigenschaften
• border und die zugehörigen Einzeleigenschaften
• border-radius
• box-decoration-break
• box-shadow
• clear und float
• color
• cursor
• display
• font und die zugehörigen Einzeleigenschaften
• line-height
• margin
• outline und die zugehörigen Einzeleigenschaften
• padding
• text-*-Eigenschaften wie text-transform
• white-space
• word-spacing und word-break
• writing-mode

Gruppen in der Konsole verwenden

Mit verschachtelten Gruppen können Sie Ihre Ausgabe strukturieren, indem Sie zusammengehörige Inhalte visuell zusammenfassen. Um einen neuen verschachtelten Block zu erstellen, rufen Sie console.group() auf. Die Methode console.groupCollapsed() funktioniert ähnlich, erstellt den neuen Block aber eingeklappt. Zum Anzeigen seines Inhalts muss er über eine Aufklappschaltfläche geöffnet werden.

Um die aktuelle Gruppe zu verlassen, rufen Sie console.groupEnd() auf. Zum Beispiel bei folgendem Code:

console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");

Die Ausgabe sieht so aus:

Timer

Mit einem Timer können Sie die Dauer eines bestimmten Vorgangs messen. Um einen Timer zu starten, rufen Sie die Methode console.time() auf und übergeben ihr als einzigen Parameter einen Namen. Um den Timer zu stoppen und die verstrichene Zeit in Millisekunden zu erhalten, rufen Sie console.timeEnd() auf und übergeben erneut den Namen des Timers. Auf einer Seite können bis zu 10.000 Timer gleichzeitig laufen.

Zum Beispiel bei folgendem Code:

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");

Dieser Code protokolliert, wie lange die Benutzerin oder der Benutzer zum Schließen des ersten Benachrichtigungsfensters benötigt, gibt die Zeit in der Konsole aus, wartet auf das Schließen des zweiten Benachrichtigungsfensters und gibt anschließend die Endzeit in der Konsole aus:

Beachten Sie, dass der Name des Timers sowohl beim Starten als auch beim Stoppen angezeigt wird.

Stack-Traces

Das console-Objekt unterstützt auch die Ausgabe eines Stack-Traces. Dieser zeigt den Aufrufpfad bis zu der Stelle, an der Sie console.trace() aufrufen. Bei folgendem Code:

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

foo();

Die Ausgabe in der Konsole sieht ungefähr so aus:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Firefox-Entwicklertools
• Web-Konsole — wie die Web-Konsole in Firefox Aufrufe der Console API verarbeitet
• about:debugging — wie Sie Konsolenausgaben anzeigen, wenn das Debugging-Ziel ein Mobilgerät ist
• Google Chrome DevTools
• Microsoft Edge DevTools
• Safari Web Inspector