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:

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.

Answer 2

Chrome Dev-Tools don't properly show jQuery-added event-listeners.

This library seems to cover this: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Finding event handlers registered using jQuery can be tricky. findHandlersJS makes finding them easy, all you need is the event type and a jQuery selector for the elements where the events might originate.