console — Schnittstelle · JavaScript-Referenz

Signatur

interface console

Beschreibung

Das globale console-Objekt ist die zentrale Schnittstelle, um während der Entwicklung Informationen in die Entwicklerwerkzeuge des Browsers (DevTools) oder in die Standardausgabe von Node.js, Deno oder Bun zu schreiben. Es ist kein Konstruktor, sondern ein Namensraum: Man ruft seine Methoden direkt auf, etwa console.log(). Es steht im window, in Web Workern und in Service Workern gleichermaßen zur Verfügung.

Die wichtigsten Methodengruppen:

Protokollierung nach Schweregrad: console.log(), console.info(), console.warn(), console.error(), console.debug() – DevTools können nach diesen Stufen filtern.
Strukturierte Ausgabe: console.table() für Arrays/Objekte als Tabelle, console.dir() für eine aufklappbare Objektansicht, console.dirxml() für DOM-Knoten.
Gruppierung: console.group(), console.groupCollapsed(), console.groupEnd() rücken zusammengehörige Ausgaben ein.
Zeitmessung und Zähler: console.time(), console.timeLog(), console.timeEnd(), console.count(), console.countReset().
Diagnose: console.assert() gibt nur bei falscher Bedingung einen Fehler aus, console.trace() druckt den aktuellen Aufrufstapel, console.clear() leert die Konsole.

Die Protokollmethoden akzeptieren beliebig viele Argumente und unterstützen Format-Platzhalter wie %s (Zeichenkette), %d/%i (Ganzzahl), %f (Gleitkommazahl), %o/%O (Objekt) und im Browser %c (CSS-Styling). Alle Methoden liefern undefined zurück und haben keinen Einfluss auf den Programmablauf – sie dienen ausschließlich der Beobachtung.

Parameter

Name	Typ	Default	Beschreibung
$...data	any[]		Gilt für `log`, `info`, `warn`, `error`, `debug`: beliebige Werte, die nacheinander ausgegeben werden. Ist das erste Argument eine Zeichenkette mit Platzhaltern (`%s`, `%d`, `%o`, `%c` …), werden die folgenden Argumente eingesetzt.
$label	string	"default"	Bezeichner für `time`/`timeLog`/`timeEnd`, `count`/`countReset` sowie Überschrift bei `group`/`groupCollapsed`.
$condition	boolean	false	Nur bei `console.assert(condition, ...data)`: Ist der Wert falsy, wird eine Fehlermeldung ausgegeben – das Programm läuft dennoch weiter.
$tabularData / columns	Array\|Object, string[]		Nur bei `console.table(data, columns)`: die darzustellenden Daten und optional eine Auswahl an Spalten.

Rückgabewert

Typ

undefined

Beschreibung

Sämtliche console-Methoden geben undefined zurück; ihr Effekt ist ausschließlich die Ausgabe in der Konsole.

Beispiele

Protokollieren nach Schweregrad mit Platzhaltern

const user = { id: 42, name: 'Anna' };

console.log('Benutzer %s (ID %d) angemeldet', user.name, user.id);
console.info('Details:', user);
console.warn('Sitzung läuft in %d Minuten ab', 5);
console.error(new Error('Token ungültig'));

// Nur im Browser: CSS-Styling mit %c
console.log('%cWichtig!', 'color: white; background: crimson; padding: 2px 6px');

Benutzer Anna (ID 42) angemeldet Details: { id: 42, name: 'Anna' } ⚠ Sitzung läuft in 5 Minuten ab ✖ Error: Token ungültig at … Wichtig! (rot hinterlegt)

Laufzeit einer asynchronen Operation messen

const loadPosts = async () => {
  console.time('fetch-posts');
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  console.timeLog('fetch-posts', 'Antwort erhalten, Status', res.status);
  const posts = await res.json();
  console.timeEnd('fetch-posts');
  return posts;
};

loadPosts();

fetch-posts: 183.4 ms Antwort erhalten, Status 200 fetch-posts: 201.9 ms

Daten als Tabelle und in Gruppen ausgeben

const products = [
  { sku: 'A1', name: 'Tastatur', price: 49.9, stock: 12 },
  { sku: 'B7', name: 'Maus', price: 19.9, stock: 0 },
  { sku: 'C3', name: 'Monitor', price: 229, stock: 4 }
];

console.group('Lagerbericht');
console.table(products, ['name', 'stock']);
console.groupCollapsed('Ausverkaufte Artikel');
products
  .filter((p) => p.stock === 0)
  .forEach((p) => console.warn(p.name));
console.groupEnd();
console.groupEnd();

Lagerbericht ┌─────────┬────────────┬───────┐ │ (index) │ name │ stock │ ├─────────┼────────────┼───────┤ │ 0 │ 'Tastatur' │ 12 │ │ 1 │ 'Maus' │ 0 │ │ 2 │ 'Monitor' │ 4 │ └─────────┴────────────┴───────┘ ▶ Ausverkaufte Artikel

Zusicherungen, Zähler und Stacktrace

const handleClick = (id) => {
  console.count('Klick');
  console.assert(typeof id === 'number', 'id muss eine Zahl sein, erhalten:', id);
  if (id < 0) console.trace('Negative ID');
};

handleClick(1);
handleClick('2');
handleClick(-1);
console.countReset('Klick');

Klick: 1 Klick: 2 Assertion failed: id muss eine Zahl sein, erhalten: 2 Klick: 3 console.trace: Negative ID at handleClick …

// Wichtig · Fallstricke

Live-Referenzen im Browser: console.log(obj) zeigt in vielen DevTools beim Aufklappen den aktuellen Zustand des Objekts, nicht den zum Zeitpunkt des Aufrufs. Für eine Momentaufnahme console.log(structuredClone(obj)) oder JSON.stringify(obj) verwenden.
Kein Programmabbruch: console.assert() wirft im Browser keine Ausnahme. Für echte Prüfungen throw oder in Node.js das Modul node:assert nutzen.
Performance: Umfangreiche Ausgaben in Schleifen verlangsamen den Code merklich und halten Objekte im Speicher (DevTools behalten Referenzen). Im Produktionscode Logs entfernen, z. B. per Build-Werkzeug (drop_console in Terser) oder über eine eigene Logger-Abstraktion.
Sicherheit/Datenschutz: Keine Tokens, Passwörter oder personenbezogenen Daten protokollieren – die Konsole ist für jeden Nutzer einsehbar, und Browser-Erweiterungen bzw. Fehlerdienste können Ausgaben mitschneiden.
Umgebungsunterschiede: %c-Styling funktioniert nur in Browsern. In Node.js schreiben warn/error nach stderr, log/info nach stdout; console.debug() wird in Chrome standardmäßig nur bei aktivierter Stufe „Ausführlich“ angezeigt.
Nicht standardisierte Methoden wie console.profile(), console.timeStamp() oder console.memory sind browserspezifisch und sollten nicht in portablem Code vorausgesetzt werden.

Siehe auch

CSSRule CSSScale Node Sensor CSS