javascript - 调试在特定事件上触发的所有函数

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
});

现在我想列出所有与窗口上的“加载”事件绑定(bind)的回调。也许有一种方法可以调试数组或对象中的信息，例如:

{
    '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'
}

这是一个例子: