Question

我正在使用Javascript构建一个相当大的应用程序。它是一个可以更改不同视图的单个页面。所有视图都有自己的变量，事件，监听器，元素等。

在处理大型馆藏和多个活动时，有时候知道页面上究竟发生了什么事情会很好。

我知道所有浏览器都有开发人员工具，但有时很难点击所有元素等等。还有一些我找不到的选项。

我感兴趣的一件事是知道当前在页面上收听了多少事件。通过这种方式，我可以确认我没有创建僵尸。

如果溶剂是开发人员工具，请告诉我在哪里查看和做什么。最重要的是，选择哪种浏览器。

Answer 1

只需使用API getEventListeners即可获取所有活动＆＃39;信息。请参阅此链接Chrome Dev Tools : view all event listeners used in the page

这个答案的内容：

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)

结果如下：

那里有很多点击绑定。绝对不是表现项目的好例子。

如果您想查看页面中所有元素中已绑定的事件以及每个事件的监听器数量，请将这些代码放入开发工具控制台：

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 2

在Chrome中执行此操作的最佳方法是使用getEventListeners，它是devtools API的一部分。（注意：这只能由devtools中的开发人员访问，页面中的普通脚本无法访问。）

您可以使用document.querySelectorAll('*')获取页面上的所有元素，并通过getEventListeners分别运行它们以获取其事件侦听器。 Another answer by Mr.Raindrop有几条建议和方法可以在实践中如何做到这一点。

Answer 3

您可以使用monitorEvents功能监控Chrome开发者工具中的事件。有关所有详细信息，请参阅http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents。

如何知道页面上有多少个事件监听器

3 个答案: