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);