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

Posted 2023-03-07

【中文标题】Chrome 开发工具：查看页面中使用的所有事件监听器

【英文标题】：Chrome Dev Tools : view all event listeners used in the page

【发布时间】：2015-04-06 15:48:58

【问题描述】：

chrome 开发工具（或任何扩展）中是否有一个功能，我可以通过它查看在某个页面/应用程序上使用的所有事件侦听器。

编辑： 它肯定不是这个问题的重复：How do I view events fired on an element in Chrome DevTools?

上述问题解释了如何查找在我们与应用交互时触发的特定事件（我知道该怎么做！）。

我正在寻找的是我们在应用程序中侦听的所有事件的列表以及它们附加到哪些 DOM 元素。

【问题讨论】：

你不能使用源面板吗：developer.chrome.com/devtools/docs/javascript-debugging?

VisualEvent - Visual Event 是一个 Javascript 小书签，它提供有关已附加到 DOM 元素的事件的调试信息。可视事件显示：哪些元素附加了事件，附加到元素的事件类型，触发将与事件一起运行的代码，定义附加函数的源文件和行号（Webkit 浏览器和仅限歌剧）

感谢安德烈亚斯的建议。我已经试过了。看起来它只抓取 DOM 级别 0 和 1 类型的事件，而不是事件侦听器。

是否可以选择使用 jQuery？

EventSpy - Event Spy 是一个 chrome 扩展，可让您监视应用程序代码中侦听的事件，这使您可以轻松剖析大型 Web 应用程序 youtube.com/watch?v=Sl2LPQt1UPc

【参考方案1】：

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

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

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

【参考方案2】：

Chrome 开发工具无法为您执行此操作。但是您可以使用 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 获得许多其他信息。即兴发挥吧。

【讨论】：

这是一个非常有价值的 Chrome Dev Console sn-p。

【参考方案3】：

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

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