console

Instanzmethoden

console.assert()

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

console.clear()

Leert die Konsole.

console.context()

Erstellt einen neuen Konsolenkontext: ein Objekt mit den meisten console-Methoden, dessen Meldungen einer optionalen Bezeichnung zugeordnet sind.

console.count()

Gibt aus, wie oft diese Zeile mit der angegebenen Bezeichnung aufgerufen wurde.

console.countReset()

Setzt den Zähler mit der angegebenen Bezeichnung zurück.

console.debug()

Gibt eine Meldung mit dem Debug-Protokollierungslevel in der Konsole aus.

console.dir()

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

console.dirxml()

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

console.error()

Gibt eine Meldung mit dem Fehler-Protokollierungslevel in der Konsole aus.

console.exception()

Ein Alias für console.error().

console.group()

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

console.groupCollapsed()

Erstellt eine neue verschachtelte Gruppe und rückt alle folgenden Ausgaben um eine weitere Ebene ein. Anders als bei console.group() ist die Gruppe zunächst eingeklappt und muss über eine Schaltfläche aufgeklappt werden. Rufen Sie console.groupEnd() auf, um eine Ebene zurückzugehen.

console.groupEnd()

Verlässt die aktuelle verschachtelte Gruppe.

console.info()

Gibt eine Meldung mit dem Info-Protokollierungslevel in der Konsole aus.

console.log()

Gibt eine Meldung in der Konsole aus.

console.profile()

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

console.profileEnd()

Stoppt den Profiler. Das erstellte Profil können Sie im Performance-Tool des Browsers ansehen (zum Beispiel im Firefox-Performance-Tool).

console.table()

Zeigt tabellarische Daten als Tabelle an.

console.time()

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

console.timeEnd()

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

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 Profiling-Tool ab.

console.trace()

Gibt einen Stacktrace aus.

console.warn()

Gibt eine Meldung mit dem Warnungs-Protokollierungslevel in der Konsole aus.

Beispiele

Text in der Konsole ausgeben

Die am häufigsten verwendete 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. Diese werden im Protokoll jeweils unterschiedlich dargestellt. Mit den Filterfunktionen Ihres Browsers können Sie nur die Ausgabearten anzeigen, 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 verknüpft und anschließend in der Konsole ausgegeben werden.
• Übergeben Sie eine Zeichenfolge mit keiner oder mehreren Platzhalterzeichenfolgen, gefolgt von einer variablen Anzahl von Argumenten, die diese ersetzen.

Ein einzelnes Objekt ausgeben

Die einfachste Verwendung der Protokollierungsmethoden 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 anzeigen möchte. Beispielsweise kann auch der private Zustand des Objekts angezeigt werden. Bestimmte Objekttypen, etwa DOM-Elemente oder Funktionen, können zudem auf besondere Weise dargestellt werden.

Momentaufnahmen von Objekten erstellen

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

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

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

Wenn Sie Ihr Objekt verändern möchten und verhindern wollen, dass die protokollierten Informationen aktualisiert werden, können Sie vor der Protokollierung eine tiefe Kopie des Objekts erstellen. Eine gängige Methode ist, es zunächst mit JSON.stringify() und anschließend mit JSON.parse() zu verarbeiten:

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

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

Mehrere Objekte ausgeben

Sie können auch mehrere Objekte ausgeben, indem Sie diese beim Aufruf der Protokollierungsmethode 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}

Platzhalter in Zeichenfolgen verwenden

Der erste Parameter der Protokollierungsmethoden 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 einer „optimal nutzbaren Formatierung“ aus. DOM-Elemente können beispielsweise so dargestellt werden, wie sie im Element-Inspektor erscheinen.

%O

Gibt ein JavaScript-Objekt in einer „allgemeinen JavaScript-Objektformatierung“ 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 formatieren.

Einige Browser unterstützen möglicherweise zusätzliche Formatbezeichner. 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 mit zwei signifikanten Stellen und 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 formatieren

Mit der %c-Direktive können Sie CSS-Stile auf Konsolenausgaben 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 danach wird gemäß den CSS-Deklarationen im Parameter formatiert.

Sie können %c mehrfach verwenden:

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

Die Eigenschaften, die Sie zusammen mit der %c-Syntax verwenden können, sind folgende (zumindest in Firefox – in anderen Browsern können sie abweichen):

• background und die entsprechenden Einzeleigenschaften
• border und die entsprechenden Einzeleigenschaften
• border-radius
• box-decoration-break
• box-shadow
• clear und float
• color
• cursor
• display
• font und die entsprechenden Einzeleigenschaften
• line-height
• margin
• outline und die entsprechenden 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 Ausgaben organisieren, indem Sie zusammengehörige Inhalte visuell gruppieren. Rufen Sie console.group() auf, um einen neuen verschachtelten Block zu erstellen. Die Methode console.groupCollapsed() funktioniert ähnlich, erstellt den neuen Block jedoch eingeklappt. Um ihn lesen zu können, müssen Sie ihn über eine Schaltfläche aufklappen.

Rufen Sie console.groupEnd() auf, um die aktuelle Gruppe zu verlassen. Bei folgendem Code beispielsweise:

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");

sieht die Ausgabe so aus:

Timer

Sie können einen Timer starten, um die Dauer eines bestimmten Vorgangs zu ermitteln. Rufen Sie dazu die Methode console.time() auf und übergeben Sie ihr einen Namen als einzigen Parameter. 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.

Bei folgendem Code beispielsweise:

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

wird die Zeit protokolliert, die der Benutzer zum Schließen des Hinweisfensters benötigt. Die Zeit wird in der Konsole ausgegeben. Anschließend wird gewartet, bis der Benutzer den zweiten Hinweis schließt, und die Endzeit wird in der Konsole ausgegeben:

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

Stacktraces

Das Konsolenobjekt unterstützt auch die Ausgabe eines Stacktraces. 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();

sieht die Ausgabe in der Konsole 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