Chrome开发者工具:查看页面中使用的所有事件监听器

Question

chrome dev工具(或任何扩展)中是否有一个功能,通过它我可以查看某个页面/应用程序上使用的所有事件侦听器.

编辑:
它肯定不是这个问题的重复:如何查看在Chrome DevTools中的元素上触发的事件？

在上述问题解释了如何寻找那些被解雇的时候,我们用我们的应用程序交互的特定事件(我知道如何做到这一点!).

什么我找的是所有事件的列表,我们听着应用程序和DOM它们所连接到的元素.

Answer 1

2021 年的答案：您现在可以使用 Chrome 开发工具来做到这一点！:)

1. • 右键单击页面中的元素并选择“检查以打开开发工具”
   • 或者
     • 打开开发者工具 ( F12)
     • 选择“元素”选项卡（默认为第一个）
     • 在 HTML 页面结构中选择一个元素
2. 在右侧框中转到“事件侦听器”（默认情况下位于“布局”旁边的第四个）
3. 选中“祖先”复选框和下拉列表中的“全部”以查看所有事件侦听器。可以选择“框架侦听器”。

Answer 2

Chrome Devtool无法为您执行此操作。但是您可以使用API​​ chrome提供的命令在控制台中检查以下内容：getEventListeners

只需将以下代码放在开发工具的控制台中，即可在页面中获取所有具有约束力的点击事件编号：

Array.from(document.querySelectorAll('*'))
  .reduce(function(pre, dom){
    var clks = getEventListeners(dom).click;
    pre += clks ? clks.length || 0 : 0;
    return pre
  }, 0)

结果是这样的：

3249

那是很多点击绑定。绝对不是性能项目的好例子。

如果要查看页面中所有元素中绑定了哪些事件以及每个事件的侦听器数量，只需将这些代码放在开发工具的控制台中：

Array.from(document.querySelectorAll('*'))
  .reduce(function(pre, dom){
    var evtObj = getEventListeners(dom)
    Object.keys(evtObj).forEach(function (evt) {
      if (typeof pre[evt] === 'undefined') {
        pre[evt] = 0
      }
      pre[evt] += evtObj[evt].length
    })
    return pre
  }, {})

结果是这样的：

{
  touchstart: 6,
  error: 2,
  click: 3249,
  longpress: 2997,
  tap: 2997,
  touchmove: 4,
  touchend: 4,
  touchcancel: 4,
  load: 1
}

您还可以从此API获得许多其他信息。只是即兴创作。

Answer 3

Chrome 开发工具无法正确显示 jQuery 添加的事件侦听器。

这个库似乎涵盖了这一点： https: //blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

查找使用 jQuery 注册的事件处理程序可能很棘手。findHandlersJS 使查找它们变得容易，您所需要的只是事件类型和事件可能源自的元素的 jQuery 选择器。