Debugging associated events via jQuery

Navigation
4

When I want to debug an event associated with an element via jQuery, I can currently do it in the following ways:

  • In Chrome, you can enable the debugger specifically for certain types of events. However, this is not useful when it is necessary to debug something in other browsers;

  • Putting a debugger statement in the first line of code of an event activates the debugger at that point, but it is inconvenient to do so for each event. Also, for cases where I'm debugging someone else's code, there's still the job of getting all the events - which can be dynamically linked and unlinked (unlinked / unlinked?).

  • Crude power. For example, for a click event: 

    function debugClick (elem) {
    debugger;
    $(elem).click();
}

This last example makes me feel bad about myself.

Is there a more elegant and cross browser way of debugging the events of an element?

    
asked by anonymous 29.01.2014 / 14:12

2 answers

2

The Chrome development tools are a great help to find event handlers .

Unfortunately, when it comes to jQuery, the event handler that is displayed is that of jQuery and not the one we register (jQuery adds some functionality and that's why we see the jquery handler in instead of ours).

We can access our handler as follows: 

$._data($("#idDoElemento").get(0), "events")

Alternatively there is a small script (disclaimer: I am the owner of this project) that allows you to use a jQuery selector to find the events we are interested in, eg, writing in the chrome console after importing findHandlersJS 

findEventHandlers("click", "*")

Returns all event handlers for clicks on any type of element on the page we are on.

Another example: 

findEventHandlers("click", "div#items :button")

return all event handlers to click the buttons inside the div with id="items"

More information on findHandlersJS here .

And here can find an example site with findHandlersJS installed and ready to use on the chrome console .

    
29.01.2014 / 15:14
2

You can debug or pause click events with the Event Listeners tab of ChromeDev Tools:

Click to view full size image

    
29.01.2014 / 14:57
Difficulty in running the emulator for Android How to make a ViewBag.list receive a type ListKeyValuePairstring, string?