调试针对特定事件

Question

我试图在窗口滚动/调整大小或任何其他窗口事件时查看所有已触发的函数。有没有办法在chrome上调试这个？也许有任何插件？

注意：我不想检测事件的目标元素。我想列出添加到事件中的所有回调。

例如，我认为我在加载时有一些回调：

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

现在我要列出所有那些与＆＃39; load＆＃39;绑定的回调。窗口上的事件。也许可以有一种方法来调试数组或对象中的信息，如：

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

或其他什么可能？

Answer 1

您可以使用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'
}

以下是一个例子：