debugger — Anweisung · JavaScript-Referenz

Signatur

debugger;

Beschreibung

Die debugger-Anweisung wirkt wie ein im Code gesetzter Breakpoint. Ist ein Debugger aktiv, etwa bei geöffneten Browser-DevTools oder in Node.js mit --inspect, hält die Ausführung genau an dieser Stelle an. Dann kannst du Variablen, den Aufrufstapel (Call Stack) und den aktuellen Gültigkeitsbereich untersuchen und den Code Schritt für Schritt weiterlaufen lassen.

Ist kein Debugger verfügbar oder geöffnet, hat die Anweisung keine Wirkung. Der Code läuft normal weiter.

Nützlich ist debugger vor allem in diesen Fällen:

Der Code wird dynamisch erzeugt oder gebündelt, und du kannst in den DevTools nur schwer einen Breakpoint setzen, z. B. bei Code aus eval, Hot-Reload oder Bundlern ohne Source Maps.
Du willst nur unter einer bestimmten Bedingung anhalten. Dann steht debugger in einem if-Block und wirkt als bedingter Breakpoint.
Du untersuchst Fehler in schwer erreichbaren Callbacks, Event-Handlern oder Promise-Ketten.

debugger ist eine eigenständige Anweisung. Sie hat keine Parameter und keinen Rückgabewert und darf überall stehen, wo eine Anweisung erlaubt ist.

Rückgabewert

Typ

void

Beschreibung

Keiner. debugger ist eine Anweisung und kein Ausdruck, liefert also keinen Wert.

Beispiele

Einfacher Breakpoint in einer Funktion

const berechneSumme = (werte) => {
  let summe = 0;
  for (const wert of werte) {
    summe += wert;
    // Mit geöffneten DevTools stoppt die Ausführung hier bei jedem Durchlauf
    debugger;
  }
  return summe;
};

console.log(berechneSumme([1, 2, 3]));

6

Bedingter Breakpoint bei fehlerhaften Daten

const bestellungen = [
  { id: 1, preis: 19.99 },
  { id: 2, preis: -5 },
  { id: 3, preis: 42 }
];

const gesamt = bestellungen.reduce((acc, bestellung) => {
  // Nur anhalten, wenn ein ungültiger Preis auftaucht
  if (bestellung.preis < 0) {
    debugger;
  }
  return acc + bestellung.preis;
}, 0);

console.log(gesamt.toFixed(2));

56.99

Debugging in einem asynchronen Ablauf

const ladeBenutzer = async (id) => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const daten = await response.json();
  // Hier lassen sich response und daten in den DevTools untersuchen
  debugger;
  return daten.name;
};

ladeBenutzer(1).then((name) => console.log(name));

Leanne Graham

Nur in der Entwicklungsumgebung anhalten

const DEBUG = true; // in Produktion auf false setzen bzw. vom Build-Tool ersetzen

const verarbeite = (eingabe) => {
  if (DEBUG && typeof eingabe !== 'string') {
    debugger;
  }
  return String(eingabe).trim();
};

console.log(verarbeite('  Hallo  '));

Hallo

// Wichtig · Fallstricke

Nicht in Produktion ausliefern: Hat ein Nutzer die DevTools geöffnet, friert die Seite an dieser Stelle ein. Linter wie ESLint melden das mit der Regel no-debugger. Bundler und Minifier wie Terser (drop_debugger) oder esbuild (--drop:debugger) können die Anweisung beim Produktions-Build automatisch entfernen.
Ohne aktiven Debugger keine Wirkung: Sind die DevTools geschlossen oder läuft Node.js ohne --inspect bzw. node inspect, passiert nichts.
Anhalten lässt sich abschalten: In den DevTools kann man Breakpoints deaktivieren, z. B. in Chrome mit „Deactivate breakpoints“ oder „Never pause here“. Dann wird auch debugger ignoriert.
Anti-Debugging-Muster: Manche Seiten rufen debugger in Endlosschleifen oder per setInterval auf, um die Untersuchung ihres Codes zu erschweren. Einen echten Schutz bietet das nicht.
Syntax: debugger ist ein reserviertes Wort und darf nicht als Bezeichner verwendet werden, z. B. nicht als Variablenname.
Kompatibilität: Wird von allen modernen Browsern und von Node.js unterstützt.

Siehe auch

console.log() console.trace() console.assert() throw try...catch Error