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.
