23

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

在处理大型集合和多个事件时，有时最好知道页面上到底发生了什么。

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

我感兴趣的一件事是知道页面上当前监听了多少事件。这样我可以确认我不是在创造僵尸。

如果解决方案是开发人员工具，请让我知道在哪里寻找和做什么。最重要的是，选择哪种浏览器。

4

3 回答 3

28

只需使用 APIgetEventListeners获取所有事件的信息。请参阅此链接Chrome 开发工具：查看页面中使用的所有事件侦听器

本回答内容：

Chrome Devtool 无法为您执行此操作。但是您可以使用 chrome 提供的 API 在控制台中检查这些内容：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 获得许多其他信息。只是即兴发挥。

于 2017-08-23T14:32:42.643 回答
16

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

您可以使用document.querySelectorAll('*')抓取页面上的所有元素，并逐个运行它们getEventListeners以获取它们的事件侦听器。Mr.Raindrop 的另一个答案有几个关于如何在实践中做到这一点的建议和方法。

于 2012-04-23T17:30:51.060 回答
6

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

于 2012-04-23T17:35:34.223 回答