Signatur
Beschreibung
console.groupCollapsed() funktioniert wie console.group(), mit einem Unterschied: Die neue Gruppe wird in den Entwicklerwerkzeugen eingeklappt angezeigt. Erst ein Klick auf das Dreieck neben der Beschriftung blendet den Inhalt ein. Alle Ausgaben nach dem Aufruf, etwa über console.log(), console.warn() oder console.table(), landen in dieser Gruppe, bis console.groupEnd() sie schließt.
Das lohnt sich bei umfangreichen Diagnose-Ausgaben, die man meistens nicht braucht, aber bei Bedarf schnell finden will. Beispiele sind Request-/Response-Details, Zustandsänderungen im State-Management oder Render-Zyklen. Die Konsole bleibt übersichtlich, und die Details liegen trotzdem an der richtigen Stelle.
Gruppen lassen sich beliebig tief verschachteln. Jeder groupCollapsed()- oder group()-Aufruf braucht genau ein passendes console.groupEnd(). Die Beschriftung kann aus mehreren Werten bestehen und unterstützt dieselben Formatierungsplatzhalter wie console.log() (%s, %d, %o, %c).
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $label | any (variadisch) | Browserabhängig, z. B. „console.group“ | Beschriftung der Gruppe. Mehrere Werte werden wie bei console.log() verkettet. Wenn der erste Wert eine Zeichenkette ist, darf er Formatierungsplatzhalter wie %s oder %c enthalten. |
Rückgabewert
undefined zurück.Beispiele
Einfache eingeklappte Gruppe
console.groupCollapsed('Benutzerdetails');
console.log('Name: Anna Schmidt');
console.log('Rolle: Admin');
console.log('Letzter Login: 2024-05-12');
console.groupEnd();
console.log('Außerhalb der Gruppe');Fetch-Anfragen übersichtlich protokollieren
const loggedFetch = async (url, options = {}) => {
const start = performance.now();
const response = await fetch(url, options);
const dauer = (performance.now() - start).toFixed(1);
console.groupCollapsed(
'%c%s %s → %d (%s ms)',
'color: steelblue; font-weight: bold',
options.method ?? 'GET', url, response.status, dauer
);
try {
console.log('Optionen:', options);
console.log('Header:', Object.fromEntries(response.headers));
} finally {
console.groupEnd(); // Gruppe wird immer geschlossen
}
return response;
};
await loggedFetch('https://jsonplaceholder.typicode.com/todos/1');Verschachtelte Gruppen für Zustandsänderungen
const logAction = (action, prevState, nextState) => {
console.groupCollapsed(`Aktion: ${action.type}`);
console.log('Payload:', action.payload);
console.groupCollapsed('Zustand');
console.log('vorher:', prevState);
console.log('nachher:', nextState);
console.groupEnd();
console.groupEnd();
};
logAction({ type: 'cart/add', payload: { id: 42 } }, { items: [] }, { items: [42] });// Wichtig · Fallstricke
- groupEnd nicht vergessen: Fehlt ein
console.groupEnd(), landen alle späteren Ausgaben in der Gruppe. Wirft der Code dazwischen einen Fehler, bleibt die Gruppe offen. RufegroupEnd()deshalb in einemfinally-Block auf. - Node.js und Terminals: Außerhalb von Browsern gibt es meist kein Ein- und Ausklappen. Node.js behandelt
groupCollapsed()wiegroup()und rückt die Ausgaben nur ein, standardmäßig um zwei Leerzeichen. Im Terminal wirkt%cnicht. - Fehler und Warnungen: Je nach Browser erscheinen
console.error()undconsole.warn()zwar innerhalb der eingeklappten Gruppe, werden aber über Konsolenfilter trotzdem gefunden. Kritische Meldungen gehören daher besser außerhalb einer eingeklappten Gruppe, damit sie nicht untergehen. - Bei geschlossenen Entwicklerwerkzeugen: Manche Browser merken sich keine Gruppen, die entstanden sind, bevor die DevTools geöffnet wurden.
- Produktion: Umfangreiches Logging kostet Leistung und kann sensible Daten verraten. Entferne es vor dem Release, zum Beispiel mit einem Build-Werkzeug, oder schalte es hinter ein Debug-Flag.