Debug all functions fired on a specific event

Question

I'm trying to see all fired functions on window scroll/resize or any other window events. Is there any way to debug this on Chrome? Maybe with any plugin?

Note: I don't want to detect the target element of event. I want to list all callbacks that are added to fire up with an event.

For example, think I have some callbacks on load like this:

window.addEventListener( 'load' , callback_function_a );
window.addEventListener( 'load' , callback_function_b );
window.addEventListener( 'load' , callback_function_c );
window.addEventListener( 'load' , function() {
    // do something
});

Now I want to list all those callbacks which are bound with 'load' event on window. Maybe there could be a way to debug the information in array or object like:

{
    'callback_function_a',
    'callback_function_b',
    'callback_function_c',
    'anonymous function',
}

or something else maybe?

With the chrome inspector, you can select an element, then click on the 'Event Listeners' tab and see all listeners registered to that element, but I don't know of any way to follow the propagation of an event. — mpallansch, May 23 '15 at 21:05
possible duplicate of [How can I detect scroll end of the specified element by JavaScript?](http://stackoverflow.com/questions/5527296/how-can-i-detect-scroll-end-of-the-specified-element-by-javascript) — inye, May 23 '15 at 21:27
or possible duplicated http://stackoverflow.com/questions/12522807/scroll-event-listener-javascript — inye, May 23 '15 at 21:28
I'm not going to detect the event target. I want to list all the callbacks that fires with any specified event. — Sohan Zaman, May 23 '15 at 21:30
maybe you can use `monitorEvents` https://developer.chrome.com/devtools/docs/commandline-api#monitoreventsobject-events — inye, May 23 '15 at 21:35
You cannot add strings as event listeners. Those calls most likely have been ignored and the strings are not stored anywhere (and cannot be inspected either). — Bergi, May 23 '15 at 21:55

score 1 · Answer 1 · answered May 03 '17 at 10:22

You can use getEventListeners(object):

// Works in console only
function callback_function_a() {}
function callback_function_b() {}
function callback_function_c() {}

window.addEventListener( 'load' , callback_function_a );
window.addEventListener( 'load' , callback_function_b );
window.addEventListener( 'load' , callback_function_c );
window.addEventListener( 'load' , function() {});

const listenerNames = getEventListeners(window).load.map(getListenerName);

console.log(listenerNames);

function getListenerName(entry) {
  return entry.listener.name ? entry.listener.name : 'anonymous'
}

Here is an example:

Debug all functions fired on a specific event

1 Answers1