Quickly finding and debugging jQuery event handlers with findHandlersJS

Method 1:
Below JQuery 1.7, type this in console:

$('#myId').data('events');
or
$($0).data('events');

Above JQuery 1.7, type this in console:

$._data($('#myId').get(0), "events");
or
$._data($($0).get(0), "events");

Note: that $0 is a special dev tools variable which always points to the last element selected in the "Elements" tabs.

Note: expand "Object" > expand "click" > expand 0 > right click on "handler" > click on "Function definition".

Method 2:

Install a Chrome Extension called Visual Event. It works wonderful.

Method 3:

Go to Google Chrome console, enter:

monitorEvents($('.current'), 'click');

Note: that $0 is a special dev tools variable which always points to the last element selected in the "Elements" tabs.

Method 4:
In Chrome, you can use getEventListeners.

1. Open Developer Tools
2. Select the element you're interested in
3. Type this the console: getEventListeners($0)
4. Hit enter.

An object mapping event names to their handlers should be returned. Note that $0 is a special dev tools variable which always points to the last element selected in the "Elements" tabs.

Method 5:

You can get findHandlersJS in github here. You can just copy and paste the raw javascript code to chrome’s console window and just start using it, or if you want to use it in your project just make sure you add it after jQuery

Go to Google Chrome console, enter:

findEventHandlers('click', '#myDiv');
Or
findEventHandlers('click', '*');

findEventHandlers.js:

var findEventHandlers = function (eventType, jqSelector) {
    var results = [];
    var $ = jQuery;// to avoid conflict between others frameworks like Mootools

    var arrayIntersection = function (array1, array2) {
        return $(array1).filter(function (index, element) {
            return $.inArray(element, $(array2)) !== -1;
        });
    };

    var haveCommonElements = function (array1, array2) {
        return arrayIntersection(array1, array2).length !== 0;
    };


    var addEventHandlerInfo = function (element, event, $elementsCovered) {
        var extendedEvent = event;
        if ($elementsCovered !== void 0 && $elementsCovered !== null) {
            $.extend(extendedEvent, { targets: $elementsCovered.toArray() });
        }
        var eventInfo;
        var eventsInfo = $.grep(results, function (evInfo, index) {
            return element === evInfo.element;
        });

        if (eventsInfo.length === 0) {
            eventInfo = {
                element: element,
                events: [extendedEvent]
            };
            results.push(eventInfo);
        } else {
            eventInfo = eventsInfo[0];
            eventInfo.events.push(extendedEvent);
        }
    };


    var $elementsToWatch = $(jqSelector);
    if (jqSelector === "*")//* does not include document and we might be interested in handlers registered there
        $elementsToWatch = $elementsToWatch.add(document); 
    var $allElements = $("*").add(document);

    $.each($allElements, function (elementIndex, element) {
        var allElementEvents = $._data(element, "events");
        if (allElementEvents !== void 0 && allElementEvents[eventType] !== void 0) {
            var eventContainer = allElementEvents[eventType];
            $.each(eventContainer, function(eventIndex, event){
                var isDelegateEvent = event.selector !== void 0 && event.selector !== null;
                var $elementsCovered;
                if (isDelegateEvent) {
                    $elementsCovered = $(event.selector, element); //only look at children of the element, since those are the only ones the handler covers
                } else {
                    $elementsCovered = $(element); //just itself
                }
                if (haveCommonElements($elementsCovered, $elementsToWatch)) {
                    addEventHandlerInfo(element, event, $elementsCovered);
                }
            });
        }
    });

    return results;
};

https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
http://www.euperia.com/development/inspect-jquery-event-handlers/969
http://stackoverflow.com/questions/23472334/how-to-find-what-code-is-run-by-a-button-element-in-chrome-using-developer-tools
https://divshot.com/blog/tips-and-tricks/ignoring-library-code-while-debugging-in-chrome/
http://stackoverflow.com/questions/5198108/are-there-tools-techniques-to-debug-jquery-event-handlers