Signatur
Beschreibung
console.debug() funktioniert wie console.log(), ordnet die Ausgabe aber der Logstufe „debug“ zu. In Chromium-basierten Browsern landet sie in der Stufe „Verbose“ (Ausführlich), die in den DevTools standardmäßig ausgeblendet ist. Firefox und Safari zeigen Debug-Meldungen als eigene Kategorie an, die sich ebenfalls filtern lässt.
Damit eignet sich die Methode gut für detaillierte Diagnose-Ausgaben wie Zustandsänderungen, Zwischenwerte oder Netzwerk-Details. Solche Meldungen braucht man bei der Fehlersuche, im Alltag würden sie die Konsole aber zumüllen. Entwickler können sie über den Logstufen-Filter gezielt einblenden, ohne den Code zu ändern.
Du kannst beliebig viele Werte übergeben. Objekte erscheinen interaktiv aufklappbar. Ist das erste Argument ein String, darfst du Formatierungsplatzhalter wie %s, %d, %o, %O und %c (CSS, nur im Browser) verwenden.
In Node.js ist console.debug() nur ein Alias für console.log() und schreibt auf stdout. Eine echte Filterung nach Logstufe gibt es dort nicht.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $...data | any[] | Beliebig viele Werte, die nacheinander ausgegeben werden. Ist das erste Argument ein String, darf es Formatierungsplatzhalter enthalten (%s, %d/%i, %f, %o, %O, %c). Die folgenden Argumente füllen diese Platzhalter der Reihe nach. |
Rückgabewert
undefined).Beispiele
Einfache Debug-Ausgabe mit mehreren Werten
const user = { id: 42, name: 'Anna', roles: ['admin'] };
console.debug('Benutzer geladen:', user);
// In Chrome nur sichtbar, wenn die Stufe "Verbose" aktiv istFormatierungsplatzhalter verwenden
const items = 3;
const total = 59.9;
console.debug('Warenkorb: %d Artikel, Summe %f €', items, total);Debug-Ausgaben per Schalter steuern
const DEBUG = new URLSearchParams(location.search).has('debug');
const debug = DEBUG ? console.debug.bind(console, '[app]') : () => {};
const fetchData = async (url) => {
debug('Starte Request:', url);
const res = await fetch(url);
debug('Status:', res.status);
return res.json();
};
fetchData('https://jsonplaceholder.typicode.com/todos/1')
.then((data) => console.log(data.title));Zwischenwerte in einer Schleife protokollieren
const prices = [19.99, 5.5, 12];
const sum = prices.reduce((acc, price, i) => {
console.debug(`Schritt ${i}: acc=${acc}, price=${price}`);
return acc + price;
}, 0);
console.log('Summe:', sum.toFixed(2));// Wichtig · Fallstricke
- Standardmäßig unsichtbar: In Chrome und Edge werden
console.debug()-Meldungen erst angezeigt, wenn im Logstufen-Menü der Konsole „Verbose“ aktiviert ist. Das ist ein häufiger Grund für die Frage: „Warum sehe ich meine Ausgabe nicht?“ - Node.js: Dort ist die Methode ein reiner Alias für
console.log()und schreibt aufstdout. Wenn du nach Stufen filtern willst, nimm eine Logging-Bibliothek (z. B.pino,debug) oderutil.debuglog(). - Produktion: Debug-Ausgaben bleiben im ausgelieferten Code aktiv und kosten Rechenzeit, vor allem wenn große Objekte serialisiert werden. Außerdem können sie sensible Daten wie Tokens oder personenbezogene Daten preisgeben. Entferne sie deshalb beim Build, z. B. mit
drop_consolein Terser oderpure: ['console.debug']in esbuild. - Live-Referenzen: Objekte werden im Browser als Referenz protokolliert. Beim Aufklappen siehst du den aktuellen Zustand, nicht den zum Zeitpunkt der Ausgabe. Für eine Momentaufnahme hilft z. B.
console.debug(structuredClone(obj))oderJSON.stringify(obj). - Die Methode ist im WHATWG Console Standard festgelegt und wird von allen modernen Browsern sowie in Web Workern unterstützt.