console.group() — Methode · JavaScript-Referenz

Signatur

console.group(...label)

Beschreibung

console.group() legt in der Konsole eine neue Inline-Gruppe an. Alle folgenden Ausgaben über console.log(), console.warn(), console.error() usw. werden eine Ebene weiter eingerückt. Mit console.groupEnd() wird die zuletzt geöffnete Gruppe wieder geschlossen.

Gruppen lassen sich verschachteln. So kann man zusammengehörige Log-Ausgaben ordnen, etwa pro HTTP-Anfrage, pro Komponenten-Rendering oder pro Schritt eines Algorithmus. In Browser-Entwicklerwerkzeugen lassen sich Gruppen per Klick auf- und zuklappen. Soll eine Gruppe von Anfang an zugeklappt sein, verwendet man console.groupCollapsed().

Die übergebenen Argumente bilden die Überschrift der Gruppe. Sie funktionieren wie bei console.log(): Es können mehrere Werte übergeben werden, und Formatplatzhalter wie %s, %o oder %c werden unterstützt. Ohne Argument zeigen Browser eine Standardbeschriftung an, z. B. „console.group“.

Parameter

Name	Typ	Default	Beschreibung
$...label	any		Beliebig viele Werte als Überschrift der Gruppe. Das erste Argument darf ein Format-String mit Platzhaltern wie `%s`, `%d`, `%o` oder `%c` sein.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück.

Beispiele

Einfache Gruppe mit Überschrift

console.log('Vor der Gruppe');
console.group('Benutzerdaten');
console.log('Name: Anna');
console.log('Rolle: Admin');
console.groupEnd();
console.log('Nach der Gruppe');

Vor der Gruppe Benutzerdaten Name: Anna Rolle: Admin Nach der Gruppe

Verschachtelte Gruppen für einen Build-Ablauf

const steps = {
  Kompilieren: ['main.ts', 'utils.ts'],
  Bündeln: ['bundle.js']
};

console.group('Build');
for (const [step, files] of Object.entries(steps)) {
  console.group(step);
  files.forEach((file) => console.log(`✔ ${file}`));
  console.groupEnd();
}
console.groupEnd();

Build Kompilieren ✔ main.ts ✔ utils.ts Bündeln ✔ bundle.js

Gruppe pro Fetch-Anfrage, sicher geschlossen mit finally

const loadUser = async (id) => {
  console.group(`%cGET /users/${id}`, 'color: steelblue; font-weight: bold');
  try {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    console.log('Status:', res.status);
    const user = await res.json();
    console.log('Name:', user.name);
    return user;
  } catch (err) {
    console.error('Fehler:', err.message);
  } finally {
    console.groupEnd(); // wird immer ausgeführt
  }
};

await loadUser(1);

GET /users/1 Status: 200 Name: Leanne Graham

// Wichtig · Fallstricke

Jedes group() braucht ein passendes groupEnd(). Fehlt es, zum Beispiel weil vorher eine Ausnahme geworfen wurde, landen alle späteren Ausgaben weiter eingerückt in der Gruppe. Daher groupEnd() am besten in einem finally-Block aufrufen.
Asynchroner Code: Gruppen gelten global für die Konsole, nicht für einzelne asynchrone Abläufe. Laufen mehrere asynchrone Vorgänge gleichzeitig mit eigenen Gruppen, können ihre Ausgaben in der falschen Gruppe landen.
Node.js: Die Methode wird ab Version 8.5 unterstützt. Dort wird nur um zwei Leerzeichen eingerückt (groupIndentation, einstellbar im Console-Konstruktor). Ein Auf- und Zuklappen gibt es nicht.
CSS-Formatierung mit %c funktioniert nur in Browsern. In Node.js wird sie ignoriert.
Überzählige Aufrufe von groupEnd() sind harmlos und werden ignoriert.
In Produktionscode sollten Debug-Gruppen entfernt oder über ein Log-Level abgeschaltet werden, weil sie die Konsole füllen und die Leistung leicht beeinträchtigen.

Siehe auch

console.groupEnd() console.groupCollapsed() console.log() console.table() console console.clear() Response.textStream()