Chrome Dev Tools : view all event listeners used in the page

Question

Is there a feature in chrome dev tools(or any extension) by which I can view all the event listeners that are used on a certain page/app.

Edit:
Its certainly not a duplicate of this question : How do I view events fired on an element in Chrome DevTools?

The above question explains how to look for a particular event that gets fired when we interact with our app ( I am aware of how to do that!).

What I am looking for is the List of all the events that we are listening to in the app and which DOM elements they are attached to.

Answer 1

The Chrome Devtool can't do this for you. But you can inspect those in your console with the API chrome gives: getEventListeners

Just put this code in your dev-tool's console, you can get all the binding click events number in your page:

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

The result is like this:

3249

That was a lot of click binding there. Definitely not a good example of project for performance.

If you want see what events have been bound in all your elements in your page and how many of the listeners of each of the events, just put these codes in your dev-tool's console:

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
  }, {})

The result is like this:

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

And so many other info you can get from this API. Just improvise.