Reputation: 10077
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
Reputation: 2658
Answer in 2021: You can now do this with Chrome Dev Tools! :)
Upvotes: 25
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
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