Get all event listeners on the page in Google Chrome

README.md

This has been incorporated in a small library.

event-listeners.js

var items = Array.prototype.slice.call(
  document.querySelectorAll('*')
).map(function(element) {
  var listeners = getEventListeners(element);
  return {
    element: element,
    listeners: Object.keys(listeners).map(function(k) {
      return { event: k, listeners: listeners[k] };
    })
  };
}).filter(function(item) {
  return item.listeners.length;
});

// See below for things you can do with the items

what-to-do.js

// Things you can do with the items

// 1. log them to the console
console.log(items);


// 2. Put a red border around the elements
items.forEach(function(item) {
  item.element.style.outline = '1px solid red';
})

// 3. generate a summary
var summary = .map(function(item) {
	var el = item.element,
		id = el.id,
		className = el.className;
	if (className instanceof SVGAnimatedString) {
		className = className.baseVal;
	}
	var str = el.tagName.toLowerCase() + (id ? '#' + id : '') + (className ? '.' + className.replace(/\s+/g, '.') : '');
	str += ' ' + item.listeners.map(function(l) {
		return l.event + ': ' + l.listeners.length;
	}).join(' ');
	return str;
}).join('\n');

console.log(summary);

Very cool!

Just to mention, this js script works in the console and not in script tag or script file in an html page.

@xxammuxx - Do you have any example where it doesn't seem to be working? Would be great if you can share a jsfiddle snippet.

https://github.com/alex2844/js-events

https://codepen.io/azaslavsky/pres/sybfE

From the codepen author:

"...all of the major browsers have decided against supporting getEventListeners. Only Chrome supports it from the command line"

👍 Thank you! :D