W3docs
de
Anmelden

Debugging und Tools in der Webentwicklung

JavaScript-Debugging im DOM mit Browser-DevTools: Elemente inspizieren, Konsole nutzen, Breakpoints setzen und häufige DOM-Probleme beheben.

Wenn ein Skript, das mit dem DOM arbeitet, sich falsch verhält, ist der schnellste Weg herauszufinden warum, die Seite aus der Perspektive des Browsers zu betrachten. Browser-Entwicklerwerkzeuge (DevTools) ermöglichen es, den Live-DOM-Baum zu lesen, JavaScript mitten in der Ausführung anzuhalten und genau zu beobachten, was jede Zeile mit der Seite macht.

Dieser Leitfaden behandelt vier praktische Fähigkeiten: DevTools öffnen und verwenden, Elemente inspizieren, DOM-Code protokollieren und schrittweise durchlaufen sowie die häufigsten Fehler beheben, die für die meisten DOM-Probleme verantwortlich sind.

Browser-Entwicklerwerkzeuge verwenden

Den DOM inspizieren

Browser-Entwicklerwerkzeuge sind in moderne Browser integrierte Hilfsprogramme zum Inspizieren und Bearbeiten des Live-DOM, zum Debuggen von JavaScript, zum Überwachen von Netzwerkanfragen und zum Messen der Leistung. Die nützlichsten Panels für die DOM-Arbeit sind:

  • Elements (Firefox: Inspector) — der Live-DOM-Baum und das CSS, das auf jeden Knoten angewendet wird.
  • Console — Protokolle, Fehler und eine REPL, in der Sie JavaScript gegen die aktuelle Seite ausführen können.
  • Sources (Firefox: Debugger) — Ihre Skripte, in denen Sie Breakpoints setzen und Code schrittweise durchlaufen.

Ein wichtiger Punkt, der Anfänger verwirrt: Das Elements-Panel zeigt den Live-DOM, nicht das von Ihnen geschriebene HTML. Wenn Ihr Skript Knoten hinzufügt, entfernt oder umschreibt, spiegelt das Elements-Panel das Ergebnis nach der Ausführung des Skripts wider — was genau das ist, was Sie beim Debuggen von DOM-Manipulationen benötigen.

Entwicklerwerkzeuge öffnen

  • Chrome: Rechtsklick auf die Seite und „Untersuchen" auswählen, oder Ctrl+Shift+I (Windows/Linux) bzw. Cmd+Opt+I (Mac) drücken.
  • Firefox: Rechtsklick auf die Seite und „Element untersuchen" auswählen, oder Ctrl+Shift+I (Windows/Linux) bzw. Cmd+Opt+I (Mac) drücken.
  • Safari: Das Entwickler-Menü in den Einstellungen aktivieren, dann im Entwickler-Menü „Web-Inspector anzeigen" auswählen.

Elemente inspizieren

Das Panel „Elements" ermöglicht es Ihnen, das HTML und CSS einer Webseite in Echtzeit zu inspizieren und zu bearbeiten.

<!DOCTYPE html>
<html>
<head>
    <title>Inspecting Elements</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <div class="content">This is some content.</div>
    <script>
        document.querySelector('.content').classList.add('highlight');
    </script>
</body>
</html>
Probier es selbst »

Verwenden Sie das Elements-Panel (drücken Sie F12, um den Inspector zu öffnen, und navigieren Sie dann zur Registerkarte Elements), um das Element <div class="content"> zu inspizieren und zu überprüfen, ob die Klasse .highlight angewendet wurde.

JavaScript debuggen, das den DOM manipuliert

Die Konsole verwenden

Die Konsole ist das schnellste Debugging-Werkzeug: Eine Log-Anweisung einfügen, neu laden und die Ausgabe lesen. Über das grundlegende console.log() hinaus machen mehrere Methoden das DOM-Debugging deutlich übersichtlicher:

  • console.log() — allgemeine Ausgabe; mehrere Argumente übergeben und sie werden nebeneinander ausgegeben.
  • console.error() / console.warn() — rot/gelb formatierte Meldungen, die leicht zu erkennen und zu filtern sind.
  • console.dir(node) — gibt einen DOM-Knoten als JavaScript-Objekt aus, sodass Sie seine Eigenschaften erweitern können, anstatt als HTML (was console.log(node) zeigt).
  • console.table(data) — rendert arrays und objects als sortierbare Tabelle.
  • console.assert(condition, msg) — protokolliert nur, wenn die Bedingung false ist, ideal für Überprüfungen.
  • console.count(label) — zählt, wie oft eine Zeile ausgeführt wird; nützlich, um einen Event-Handler zu erkennen, der zu oft auslöst.
const items = [
  { id: 1, name: 'Alpha' },
  { id: 2, name: 'Beta' },
];

console.log('Loaded items:', items.length); // Loaded items: 2
console.table(items);                        // sortable table of both rows
console.assert(items.length > 0, 'No items!'); // silent: condition is true
console.assert(items.length > 5, 'Too few items'); // logs the assertion message

Wenn Sie einen DOM-Knoten protokollieren, bevorzugen Sie console.dir(el), um seine Eigenschaften (wie el.dataset oder el.classList) zu inspizieren, und console.log(el), um sein gerendertes HTML zu inspizieren — beide zeigen zwei verschiedene Ansichten desselben Elements.

Breakpoints setzen

Breakpoints ermöglichen es, die Ausführung von JavaScript an bestimmten Codezeilen anzuhalten, um Variablen und den Call-Stack zu inspizieren.

Breakpoints setzen

  1. Öffnen Sie das Panel „Sources" in Chrome oder das Panel „Debugger" in Firefox.
  2. Navigieren Sie zur JavaScript-Datei, die Sie debuggen möchten.
  3. Klicken Sie auf die Zeilennummer, an der Sie einen Breakpoint setzen möchten.

Wenn die Ausführung anhält, verwenden Sie die Steuerelemente zum Schrittweise-Durchlaufen: Step over (aktuelle Zeile ausführen), Step into (in eine aufgerufene Funktion eintreten) und Step out (aktuelle Funktion beenden). Der Bereich Scope zeigt lokale Variablen, und Call Stack zeigt, wie Sie zu dieser Zeile gelangt sind.

Die debugger-Anweisung

Sie können die Ausführung auch direkt aus dem Code heraus anhalten. Wenn DevTools geöffnet ist, wirkt die Anweisung debugger; wie ein Breakpoint, der in Ihrem Quellcode lebt — praktisch für Code, der zur Laufzeit generiert wird oder den Sie im Sources-Panel nicht einfach anklicken können:

function updateTitle(text) {
  debugger; // execution pauses here when DevTools is open
  document.title = text;
}

Wenn DevTools geschlossen ist, bewirkt debugger nichts, sodass es während der Entwicklung sicher belassen werden kann (aber vor dem Veröffentlichen entfernen).

Bedingte Breakpoints und Logpoints

Für einen Handler, der viele Male ausgeführt wird, klicken Sie mit der rechten Maustaste auf eine Zeilennummer und wählen Sie Bedingten Breakpoint hinzufügen, um nur anzuhalten, wenn ein Ausdruck wahr ist (zum Beispiel count > 100). Ein Logpoint gibt eine Nachricht aus, ohne anzuhalten — wie ein console.log(), das Sie hinzufügen können, ohne den Quellcode zu bearbeiten.

Beispiel für das Debuggen von DOM-Manipulationen

<!DOCTYPE html>
<html>
<head>
    <title>Debugging Example</title>
</head>
<body>
    <div id="content">Hello, World!</div>
    <button id="change-text">Change Text</button>
    <p id="log"></p>

    <script>
        document.getElementById('change-text').addEventListener('click', function() {
            const content = document.getElementById('content');
            const log = document.getElementById('log');
            log.textContent = 'Current text: ' + content.textContent;
            content.textContent = 'Hello, Developer!';
            log.textContent += ' | Updated text: ' + content.textContent;
        });
    </script>
</body>
</html>
Probier es selbst »

Dieses Beispiel demonstriert, wie DOM-Manipulationen debuggt werden können, indem die Änderungen im DOM angezeigt werden.

Häufige Probleme und Lösungen

Häufige DOM-Manipulationsprobleme beheben

  1. Element nicht gefunden

    Der häufigste DOM-Fehler ist ein TypeError: Cannot read properties of null. Das bedeutet, dass ein Selektor null zurückgegeben hat, weil das Element nicht existiert (ein Tippfehler in der ID oder der falsche Selektor). Überprüfen Sie das Ergebnis immer, bevor Sie es verwenden. Siehe Searching: getElement, querySelector für den Unterschied zwischen Selektormethoden.

const element = document.getElementById('nonexistent');
if (element) {
    element.textContent = 'Found!';
} else {
    document.body.insertAdjacentHTML('beforeend', '<p>Element not found</p>');
}

  1. Falsches Timing

    Wenn ein <script> im <head> ausgeführt wird, bevor der Body geparst ist, existieren die gesuchten Elemente noch nicht — was denselben null-Fehler wie oben erzeugt. Führen Sie DOM-Code aus, nachdem das Dokument geparst wurde, indem Sie auf das Ereignis DOMContentLoaded horchen (oder das Skript am Ende von <body> platzieren).

document.addEventListener('DOMContentLoaded', function() {
    const element = document.getElementById('content');
    element.textContent = 'DOM fully loaded';
});

  1. CSS nicht angewendet

    Wenn eine Stiländerung keine sichtbare Wirkung hat, überprüfen Sie im Elements-Panel, ob die Klasse tatsächlich hinzugefügt wurde (element.classList), und ob keine spezifischere Regel sie überschreibt — DevTools zeigt überschriebene Regeln mit einem Durchstrich an. Verwandt: Ereignisbehandlung im DOM.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Not Applied</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="content">This is visible</div>
    <button id="hide-content">Hide Content</button>

    <script>
        document.getElementById('hide-content').addEventListener('click', function() {
            const content = document.getElementById('content');
            content.classList.add('hidden');
        });
    </script>
</body>
</html>
Probier es selbst »

Dieses Beispiel demonstriert das Ausblenden eines Inhaltselements durch Hinzufügen der Klasse .hidden.

Info

Verwenden Sie das Panel „Sources" in den Browser-Entwicklerwerkzeugen, um Breakpoints zu setzen und Ihren JavaScript-Code Zeile für Zeile zu durchlaufen. Dies ermöglicht es Ihnen, Variablen, den Call-Stack und den Zustand des DOM bei jedem Schritt zu inspizieren, was die Identifizierung und Behebung von Fehlern erheblich erleichtert.

Fazit

Browser-Entwicklerwerkzeuge sind unverzichtbar für das Inspizieren des DOM, das Debuggen von JavaScript und die Behebung häufiger Probleme. Durch die Beherrschung dieser Werkzeuge und Techniken können Sie Ihren Entwicklungs-Workflow erheblich verbessern und zuverlässigere Webanwendungen erstellen.

Übungen

Übung
Welche der folgenden Aussagen über Debugging und Tools für DOM-Manipulationen sind wahr?
Welche der folgenden Aussagen über Debugging und Tools für DOM-Manipulationen sind wahr?
Was this page helpful?