Debugging custom DOM events in browser

Question

Is it possible to see (debug) custom events being fired from DOM elements in the browser?

Let's say I want to see which specific element of the Bootstrap Collapse fires the show.bs.collapse event, can I somehow see it for instance in Chrome dev tools?

Answer 1

First off, Monitor Events will handle this for normal JS events. However, Bootstrap events are jQuery events, so vanilla JS event listeners don't listen for them.

To listen to jQuery events run the following code snippet in your console: jQuery('body').bind("show.bs.collapse", function(e){console.log(e);});

Replace "shown.bs.collapse" with whatever event you want. When they are logged, just check the target element for the event to know what fired it.

Now, for the other way around, to see what is listening to events. Within the elements panel, if you go to the event listener tab and uncheck "ancestors", then you will see only the directly bound event listeners on an element. This way you know what is listening for the event so you can inspect what should be done when it is fired. This matters, since you may find 'body' isn't getting the event, since it could have bubbling cancelled. So if the above snippet isn't working, you need to check for bubble cancelling in the element listening for the event.

Answer 2

Firefox offers out of the box, listeners for jQuery events, https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

But you can extend it: http://flailingmonkey.com/view-jquery-and-jquery-live-events-in-firefox-devtools/

Answer 3

You can use Visual Event 2 bookmarklet. Great tool used to inspect which events are attached to a specific DOM elements.