Debug associated events via jQuery

Question

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 of no use when it is necessary to debug something in other browsers;

• place an instruction debugger in the first line of code of an active event the debugger at that point, but it is inconvenient to do so for each event. Also, for cases where I will debug someone else’s code, there is still the work of getting all the events - which can be associated and disfellowshipped (tied/untied?) dynamically.

• Brute force. For example, for a click event:

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

This last example makes me feel bad about myself.

Is there any more elegant and cross browser to debug the events of an element?

Answer 1

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

Click here to see the larger image

Answer 2

Chrome development tools are a great help in finding Event handlers .

Unfortunately, when it comes to jQuery, the Event Handler that is displayed is the jQuery and not the one that we registered (jQuery adds some functionality and that is why we see jquery Handler instead of our own).

We can access our Handler as follows:

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

Alternatively there is a small script (Disclaimer: I own this project) that allows you to use a jQuery selector to find the events we are interested in, for example, by writing to the Chrome console after importing findHandlersJS

findEventHandlers("click", "*")

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

Another example:

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

returns all Event handlers to click the buttons inside the div with id="items"

More information about findHandlersJS here(this in English).

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