DevTools snippet to properly debug jQuery event listeners

find_jquery_handlers.js

function findHandlers (element, eventType, groupBySelector = false) {
    function stringForElement (e) {
        if (e === document) {
            return 'document'
        };
        return e.nodeName.toLowerCase() + '.' + Array.from(e.classList).join('.');
    }

    function getAllHandlers () {
        const handlers = {};
        let currentNode = element;
        while (!!currentNode) {
            let newHandlers = $._data(currentNode, 'events') || [];
            for (let type in newHandlers) {
                (newHandlers[type] || []).forEach(handler => {
                    handler.target = currentNode;
                });
                (handlers[type] || (handlers[type] = [])).push(...newHandlers[type]);
            };
            currentNode = currentNode.parentNode;
        };
        
        if (groupBySelector) {
            return Object.keys(handlers)
                .reduce((acc, type) => {
                    acc[type] = handlers[type].reduce((acc, handler) => {
                        acc[handler.selector || stringForElement(handler.target)] = handler;
                        return acc;
                    }, {});
                    return acc;
                }, {});
        } else {
            return handlers;
        }
    
    };

    let handlers = getAllHandlers();
    if (!!eventType) {
        return handlers[eventType];
    } else {
        return handlers;
    }  
};
'Usage: findHandlers(element, eventType, groupBySelector)';