Beim Debugging von Formularen oder Website-Interaktionen tut sich manchmal das Problem auf, dass man entweder dem Support mit dem Absenden von Formularen auf die Nerven geht, oder dass das Klicken von Links zu schnell die nächste Seite lädt.
Da mich beides auch genervt hat, habe ich mir Bookmarklets im Browser hinterlegt und deaktiviere das Absenden von Formularen oder das Laden einer Seite nach dem Klick auf einen Link einfach. Das spart Zeit bringt Komfort im Debugging.
Bookmarklet zum Blockieren von Formularen
Um das Absenden von Formularen temporär zu deaktivieren kann man sich folgendes Bookmarklet anlegen (wie man ein Bookmarklet anlegt habe ich bereits in diesem Artikel beschrieben):
javascript:(function(){var script=document.createElement('script');script.textContent="console.log('Form submissions are now disabled...');document.querySelector('form').addEventListener('submit',function(event){event.preventDefault();console.log('Form submission prevented for testing.');});";document.body.appendChild(script);})();
Aktiviert man das Bookmarklet durch einen Klick auf das Lesezeichen, so kann man ein Formular ausfüllen und auf den „Senden“ Button klicken, ohne dass das Formular abgesendet wird. Somit lässt sich z.B. einfach testen, ob ein Tracking-Event korrekt ausgelöst wird.
Das Bookmarklet fügt einen Event Listener für das Absenden des Formulares hinzu und blockiert dann das Absenden dann, indem die Standardaktion des Formulars deaktiviert wird (event.preventDefault()). Stattdessen wird eine Nachricht in der Konsole ausgegeben.
Disclaimer: Formulare auf Webseiten können auf unterschiedlichste Weise eingebunden sein bzw. funktionieren. Das Bookmarklet kann nicht alle Fälle abdecken, somit gibt es keine Garantie, dass es in allen Fällen funktioniert. Aber natürlich kann man den Code nach eigenem Gusto anpassen.
Bookmarklet zum Blockieren von Link-Klicks
Analog zum obigen Bookmarklet kann man sich auch eines anlegen, welches das Laden der nächsten Seite beim Klick auf einen Link verhindert. Damit lassen sich z.B. Events debuggen, welche beim Klick auf den Link ausgelöst werden sollen. Und zwar ohne, dass immer erst die neue Seite geladen werden muss. Das kann insbesondere bei cross-domain Szenarien die Arbeit erleichtern.
Der Code für das Bookmarklet lautet:
javascript:(function(){console.log('Bookmarklet activated: Navigation prevention is now enabled.');document.body.addEventListener('click',function(event){let link=event.target.closest('a');if(link&&link.href){event.preventDefault();console.log('Navigation prevented: ', link.href);}},true);})();
Wie auch beim obigen Bookmarklet fügt dieses Script einen Event Listener hinzu, welcher auf Klicks reagiert. Im Falle, dass auf einen Link geklickt wird, wird auch hier die Funktion event.preventDefault() aufgerufen um das Laden der neuen Seite zu unterbinden.
Solltet ihr weitere Ideen haben, welche Bookmarklets hilfreich beim Debuggen sein könnten, lasst es mich gern wissen.