How to find what is causing a preventDefault which overrides normal click behavior

Question

I've inherited some large piece of code. Somewhere inside a way too generalised e.preventDefault() is prohibiting the normal behavior of an anchor click.

I thought about running profiler in Chrome webtools to see what is happening when clicking on a particular link, hoping to trace it back to the culprit statement. However I haven't had much luck

how can I trace back (if possible) a statement that is overriding normal click behavior, when clicking a link in Chrome webtools? (I am using jQuery)

Answer 1

You should be able to override Event.prototype.preventDefault and add a debugger statement as its first line.

Run the following via the console.

var oldEPD = Event.prototype.preventDefault; Event.prototype.preventDefault = function() {     debugger;     oldEPD.call(this); }; 

Answer 2

Based on techfoobar answer, here's modern and more advanced version that is quite useful to debug event-related problems. Note it expects you to be using a modern env JS like Webpack/Babel but you can certainly make the same work with older JS syntax.

It's basically the same except the log message is more user-friendly. I try to compute a "meaningful selector" that will help you debug the problem:

click.stopPropagation() on section#nav-bar > a.Tappable-inactive.group-link.nav-bar-item.my-main-team > div.nav-bar-item-content > svg

// Logs all calls to preventDefault / stopPropagation in an user-friendly way if ( process.env.NODE_ENV !== "production" ) {   (function monkeyPatchEventMethods() {      const logEventMethodCall = (event,methodName) => {       const MinimumMeaninfulSelectors = 3; // how much meaningful items we want in log message       const target = event.target;        const selector = (function computeSelector() {         const parentSelectors = [];         let node = target;         let minimumSelectors = 0;         do {           const meaningfulSelector = node.id ?             `#${node.id}` : node.classList.length > 0 ?               `.${Array.prototype.join.call(node.classList, '.')}` : undefined;           if ( meaningfulSelector ) minimumSelectors++;           const nodeSelector = `${node.tagName.toLowerCase()}${meaningfulSelector ? meaningfulSelector : ''}`;           parentSelectors.unshift(nodeSelector);           node = node.parentNode;         } while (node && node !== document && minimumSelectors < MinimumMeaninfulSelectors);         return parentSelectors.join(" > ");       })();        console.debug(`${event.type}.${methodName}() on ${selector}`,event);     };      const preventDefault = Event.prototype.preventDefault;     Event.prototype.preventDefault = function() {       logEventMethodCall(this,'preventDefault');       preventDefault.call(this);     };      const stopPropagation = Event.prototype.stopPropagation;     Event.prototype.stopPropagation = function() {       logEventMethodCall(this,'stopPropagation');       stopPropagation.call(this);     };    })(); } 

https://gist.github.com/slorber/b1c0ffef56abd449c05476b5c609a36e