bhavya_w
bhavya_w

Reputation: 10077

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

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.

Upvotes: 23

Views: 42792

Answers (3)

Zaphoid
Zaphoid

Reputation: 2658

Answer in 2021: You can now do this with Chrome Dev Tools! :)

    • Right click on element in page and select "Inspect to open dev tools
    • Alternatively
      • Open Developer Tools (F12)
      • Select "Elements" Tab (first one by default)
      • Select an Element in the HTML page structure
  1. In the right box go to "Event Listeners" (by default 4th next to "Layout")
  2. Check "Ancestors" checkbox and "All" in dropdown to see all the Event Listeners. Optionally select "Framework Listeners".

Upvotes: 25

Mr.Raindrop
Mr.Raindrop

Reputation: 959

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.

Upvotes: 39

Qasim
Qasim

Reputation: 1580

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.

Upvotes: 3

Related Questions