1

I'm registering a lot of custom triggers on the window, and for debugging purposes would like to see in the console when those events are triggered without having to manually register a console.log(); for each trigger.

Are there any ways to detect custom jQuery triggers on an element and console.log(); information about the event when triggered?

If click and other standard events are included, that's OK.

shshaw
  • 3,123
  • 2
  • 23
  • 33
  • have you tried `event.type`? – Jai May 15 '14 at 18:51
  • @Jai I want to execute a `console.log` any time an event is triggered. `event.type` may be useful for what is displayed in the `console.log`, but doesn't help with the initial problem. – shshaw May 15 '14 at 18:54
  • take a look at this : http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool – amin May 15 '14 at 19:00
  • @amin Thanks for the link. The code may be outdated or wrong for this scenario. I get the error `Cannot read property 'click' of undefined` when I pass in an element and a `Cannot read property 'nodeType' of undefined` error if I pass in `window`. – shshaw May 15 '14 at 19:08
  • from jquery blog : http://blog.jquery.com/2012/08/09/jquery-1-8-released/ `$(element).data(“events”)`: In version 1.6, jQuery separated its internal data from the user’s data to prevent name collisions. However, some people were using the internal undocumented “events” data structure so we made it possible to still retrieve that via .data(). This is now removed in 1.8, but you can still get to the events data for debugging purposes via `$._data(element, "events")`. Note that this is not a supported public interface; the actual data structures may change incompatibly from version to version. – amin May 15 '14 at 19:14
  • @amin The $._data() for events only seems to be populated _after_ an event has been triggered or registered with `on` and therefore can't be used for alerting when jQuery's `trigger` has been called. – shshaw May 15 '14 at 19:23

2 Answers2

4

The simplest way to accomplish this: extending jQuery's built-in trigger function.

var oldTrigger = $.fn.trigger;
jQuery.fn.extend({
  trigger: function(event,data) {
    console.debug("Triggered %s on %s",event,this[0]);
    var trigReturn = oldTrigger.apply(this,arguments);//$(this).trigger(event,data);
    return trigReturn;
  }
});

Then any triggers should show up in the console. For example: $(document).trigger("MYEVENT"); outputs Triggered MYEVENT on #document in the console.

Obviously this should only be used for testing and not in a production environment.

Example: http://codepen.io/shshaw/pen/tDfho

shshaw
  • 3,123
  • 2
  • 23
  • 33
0

This only works in Chrome (I am not aware of one that works in other browsers, see here).

events = []
for (event in getEventListeners(document)) {
   events.push(event);
}
monitorEvents(document, events);

Caveat emptor: I tried this on Stack Overflow and it almost froze my browser because it was outputting so much data.

Source: Chrome developer tools.

Community
  • 1
  • 1
patstuart
  • 1,931
  • 1
  • 19
  • 29
  • Are you missing some code? I get `Uncaught ReferenceError: getEventListeners is not defined` in the console. – shshaw May 15 '14 at 19:52
  • No. Which browser type and version are you using? It is working for me in Chrome 31. – patstuart May 15 '14 at 19:57
  • Chrome 34. I copied and pasted the code into the console directly and tried it in a script as well. No dice. – shshaw May 15 '14 at 20:06
  • This function is only defined in the dev tools console. If you are trying to call it while the tools are not active, it won't work. I know if you can call it from the code itself while the tool is active. – patstuart May 15 '14 at 20:10