console.dirxml() — Methode · JavaScript-Referenz

Signatur

console.dirxml(...objects)

Beschreibung

console.dirxml() zeigt übergebene Knoten (HTML-Elemente, XML-Dokumente, Dokumentfragmente) als Markup-Baum an, so wie im Elemente-Inspektor der Entwicklerwerkzeuge. Die Kindelemente lassen sich auf- und zuklappen. Beim Überfahren mit der Maus wird das Element meist auch auf der Seite hervorgehoben.

Der Unterschied zu console.dir(): dir() zeigt ein Element als JavaScript-Objekt mit all seinen Eigenschaften wie className oder childNodes. dirxml() zeigt dagegen die Markup-Struktur. In Chromium und Firefox liefert console.log() bei DOM-Knoten oft schon dieselbe Baumansicht. dirxml() macht diese Absicht aber ausdrücklich und klappt in der Ausgabe nicht versehentlich auf die Objektansicht um.

Übergibt man Werte, die keine Knoten sind (Zahlen, Strings, einfache Objekte), verhält sich die Methode wie console.log(). Mehrere Argumente werden nacheinander in einer Zeile ausgegeben. Praktisch ist das beim Debuggen dynamisch erzeugter DOM-Strukturen, beim Prüfen von Ergebnissen des DOMParser oder beim Untersuchen von XML-Antworten eines Servers.

Parameter

Name	Typ	Default	Beschreibung
$...objects	Node \| Document \| DocumentFragment \| any		Ein oder mehrere Werte, die ausgegeben werden. DOM- und XML-Knoten erscheinen als Elementbaum, alle anderen Werte wie bei `console.log()`.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Die Methode schreibt nur in die Konsole.

Beispiele

HTML-Element als Baum inspizieren

// Navigation als aufklappbaren Markup-Baum anzeigen
const nav = document.querySelector('nav');
console.dirxml(nav);

// Zum Vergleich: Objektansicht mit allen Eigenschaften
console.dir(nav);

▶ <nav class="main-nav">…</nav> ▶ nav.main-nav

XML-Antwort eines Servers untersuchen

const ladeFeed = async () => {
  const res = await fetch('/feed.xml');
  const text = await res.text();
  const xml = new DOMParser().parseFromString(text, 'application/xml');

  // Parser-Fehler erkennen
  if (xml.querySelector('parsererror')) {
    console.error('Ungültiges XML');
    return;
  }
  console.dirxml(xml.documentElement);
};

ladeFeed();

▶ <rss version="2.0">…</rss>

Dynamisch erzeugtes Fragment prüfen

const fragment = document.createDocumentFragment();
['Äpfel', 'Birnen', 'Kirschen'].forEach((obst) => {
  const li = document.createElement('li');
  li.textContent = obst;
  fragment.append(li);
});

// Mehrere Argumente: Text und Knoten gemischt
console.dirxml('Fragment vor dem Einfügen:', fragment);

Fragment vor dem Einfügen: ▶ #document-fragment <li>Äpfel</li> <li>Birnen</li> <li>Kirschen</li>

Nicht-Knoten verhalten sich wie console.log()

const config = { theme: 'dark', lang: 'de' };
console.dirxml(config, 42);

{theme: 'dark', lang: 'de'} 42

// Wichtig · Fallstricke

Live-Ansicht: In den meisten Browsern wird der Baum erst beim Aufklappen gelesen. Er zeigt also den aktuellen Zustand des DOM, nicht den Zustand zum Zeitpunkt des Aufrufs. Brauchst du eine Momentaufnahme, gib einen Klon aus: console.dirxml(el.cloneNode(true)), oder das Markup als Text über el.outerHTML.
Node.js: Dort gibt es keinen DOM. console.dirxml() ruft intern einfach console.log() mit denselben Argumenten auf.
Kein Standard-Ausgabeformat: Die WHATWG-Spezifikation überlässt die Darstellung dem Browser. Wie die Ausgabe genau aussieht, unterscheidet sich je nach Entwicklerwerkzeug. Safari zeigt bei manchen Werten eine andere Ansicht.
Produktivcode: Konsolenausgaben großer DOM-Bäume halten Referenzen auf die Knoten fest, solange die Konsole geöffnet ist. Das kann Speicherlecks bei der Fehlersuche vortäuschen. Entferne Debug-Aufrufe vor dem Ausliefern, zum Beispiel per Linter-Regel no-console.

Siehe auch

console.dir() console.log() console.table() console.group() DOMParser Element.outerHTML Response.formData()