Formulare dauerhaft per DevTools Snippet blockieren

Tue, 07 Apr 2026 00:00:00 +0000

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.

Javascript on besserentwickeln.de

Formulare dauerhaft per DevTools Snippet blockieren

Snippet anlegen

Warum das funktioniert

Vorteil gegenüber Breakpoints

Schnelle Alternative: Console