Manchmal möchte man beim Entwickeln oder Debuggen verhindern, dass ein Formular abgeschickt wird – ohne jedes Mal den Quellcode anzupassen oder einen Breakpoint zu setzen. Als DevTools Snippet lässt sich das einmal ablegen und dann nach jedem Seitenladen mit einem Klick erneut ausführen.

Snippet anlegen

Im Chrome DevTools unter Sources → Snippets ein neues Snippet erstellen und folgenden Code einfügen:

1
2
3

document.addEventListener("submit", e => {
  e.preventDefault();
}, true);

Anschließend mit Strg + Enter (bzw. Cmd + Enter) ausführen.

Warum das funktioniert

• Global – der Listener hängt am document und greift damit auf alle Formulare der Seite.
• Capture-Phase (true) – der Listener läuft, bevor der Event die Handler am Formular selbst erreicht. e.preventDefault() unterbindet dann das Standardverhalten des Browsers, also das eigentliche Abschicken bzw. das Neuladen der Seite.

preventDefault() stoppt allerdings nicht die weitere Ausbreitung des Events – Handler von React, Vue & Co. laufen trotzdem noch. Solange die nur den nativen Submit abfangen, ist das egal. Verschickt ein Framework-Handler die Daten aber selbst per fetch/XMLHttpRequest, muss man die Ausbreitung zusätzlich unterbinden:

1
2
3
4

document.addEventListener("submit", e => {
  e.preventDefault();
  e.stopImmediatePropagation();
}, true);

Vorteil gegenüber Breakpoints

Ein Snippet ist schnell ausgeführt, muss nicht jedes Mal neu konfiguriert werden und lässt sich problemlos erweitern – zum Beispiel um ein console.log, das die Formulardaten ausgibt:

1
2
3
4

document.addEventListener("submit", e => {
  e.preventDefault();
  console.log("Form submit blocked:", e.target);
}, true);

So sieht man sofort, welches Formular betroffen wäre, ohne dass eine Anfrage rausgeht.

Schnelle Alternative: Console

Wer das nur einmalig ausprobieren möchte, kann den Code auch direkt in die Console (Tab Console) einfügen und mit Enter bestätigen. Der Effekt ist identisch. In beiden Fällen ist der Listener nach dem nächsten Seitenneuladen weg – der Unterschied: Das Snippet bleibt im DevTools gespeichert und lässt sich mit einem Klick erneut ausführen, während man den Console-Befehl jedes Mal neu einfügen muss.