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. Mit einem DevTools Snippet lässt sich das einmalig einrichten und gilt dann für die gesamte Browser-Session.

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 Event wird abgefangen, bevor er die einzelnen Elemente erreicht. Das bedeutet: auch Framework-interne Handler von React, Vue & Co. kommen gar nicht erst dran.

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 – allerdings geht er beim nächsten Seitenneuladen verloren. Das Snippet hingegen bleibt dauerhaft im Browser gespeichert und ist jederzeit wieder ausführbar.