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

时间:2015-02-06 13:26:55

标签: javascript google-chrome google-chrome-devtools

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

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

以上问题解释了如何查找在与我们的应用互动时被触发的特定事件(我知道如何做到这一点!)。

我正在寻找是我们正在应用中收听的所有活动的列表以及它们所附加的DOM元素。

3 个答案:

答案 0 :(得分:8)

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获得许多其他信息。只是即兴发挥。

答案 1 :(得分:2)

Chrome Dev-Tools无法正确显示添加jQuery的事件监听器。

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

  

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

答案 2 :(得分:2)

2021 年的答案:您现在可以使用 Chrome Dev Tools 做到这一点! :)

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