Signatur
Beschreibung
console.dir() zeigt ein Objekt als Eigenschaftsbaum in der Konsole an. In Browser-Entwicklerwerkzeugen kann man die Einträge aufklappen und so verschachtelte Eigenschaften, die Prototypkette ([[Prototype]]) und Getter-Werte untersuchen.
Am deutlichsten wird der Unterschied zu console.log() bei DOM-Elementen: console.log(element) zeigt in den meisten Browsern den HTML-Baum (Markup), console.dir(element) dagegen das zugrundeliegende JavaScript-Objekt mit allen Eigenschaften wie id, dataset, classList oder onclick. Auch Funktionen werden so als Objekte gezeigt (mit name, length, prototype usw.) statt nur als Quelltext.
In Node.js ruft console.dir() intern util.inspect() auf. Über das zweite Argument options lässt sich steuern, wie tief verschachtelte Objekte ausgegeben werden, ob Farben verwendet werden und ob nicht aufzählbare Eigenschaften sichtbar sind. Das ist besonders nützlich, weil console.log() in Node.js ab der dritten Verschachtelungsebene nur noch [Object] ausgibt.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $object Pflicht | any | Das Objekt (oder ein beliebiger Wert), dessen Eigenschaften angezeigt werden sollen. Primitive Werte werden einfach ausgegeben. | |
| $options | Object | Nur Node.js (in Browsern ignoriert). Optionen für util.inspect(), u. a. depth (Standard 2, null = unbegrenzt), colors (Standard false), showHidden (nicht aufzählbare Eigenschaften und Symbole anzeigen, Standard false) und customInspect (Standard true). |
Beispiele
DOM-Element als Objekt untersuchen (Browser)
const button = document.querySelector('button');
// Zeigt das HTML-Markup: <button id="save">Speichern</button>
console.log(button);
// Zeigt das JS-Objekt mit allen Eigenschaften
console.dir(button);
// Aufklappen zeigt z. B. id, classList, dataset, disabled, onclick ...Tief verschachtelte Konfiguration vollständig ausgeben (Node.js)
const config = {
server: {
http: {
tls: { cert: './cert.pem', key: './key.pem' }
}
}
};
console.log(config);
// Ab Ebene 3 abgeschnitten
console.dir(config, { depth: null, colors: true });Nicht aufzählbare Eigenschaften sichtbar machen (Node.js)
const user = { name: 'Anna' };
Object.defineProperty(user, 'passwordHash', {
value: 'x9f3...',
enumerable: false
});
console.dir(user);
console.dir(user, { showHidden: true });Funktion als Objekt betrachten
const berechneSumme = (a, b) => a + b;
console.log(berechneSumme); // [Function: berechneSumme]
console.dir(berechneSumme); // Im Browser aufklappbar: length, name, [[Scopes]] ...// Wichtig · Fallstricke
- Nur ein Objekt:
console.dir()gibt nur das erste Argument aus. Anders als beiconsole.log()werden weitere Werte nicht angehängt. In Node.js wird das zweite Argument alsoptionsgelesen.console.dir('Benutzer:', user)führt also nicht zum gewünschten Ergebnis. - Browser-Unterschiede: Das Argument
optionsgibt es nur in Node.js (und kompatiblen Laufzeiten wie Deno und Bun). Browser ignorieren es. Firefox und Chrome zeigen die Ausgabe leicht unterschiedlich an. Bei reinen Objekten sehenlogunddirin Chrome oft fast gleich aus. - Live-Referenz: Im Browser wird das Objekt erst beim Aufklappen ausgewertet. Die angezeigten Werte zeigen also den Zustand zum Zeitpunkt des Aufklappens, nicht zum Zeitpunkt des Aufrufs. Wer eine Momentaufnahme braucht, sollte eine Kopie ausgeben:
console.dir(structuredClone(obj))oderJSON.parse(JSON.stringify(obj)). - Performance und Sicherheit: Große Objekte mit
depth: nullkönnen die Ausgabe stark verlangsamen. Vor dem Produktivbetrieb sollten Debug-Ausgaben entfernt werden, da sie sensible Daten wie Tokens oder Passwort-Hashes preisgeben können. console.dirxml()macht das Gegenteil: Es zeigt Elemente bewusst als XML/HTML-Baum.