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

Useful script, quick typo: .map(function(item) Should be items.map(function(item).

Nice script, you could use the new ES2015 syntax and make use of the Array.from methode to make it a bit cleaner:

const items = Array.From(document.querySelectorAll('*')).map(element => {
  const listeners = getEventListeners(element);

  return {
    element: element,
    listeners: Object.keys(listeners).map(key => {

      return {
        event: key,
        listeners: listeners[key]
      };

    })
  };

}).filter(item => item.listeners.length);

@marcobiedermann it will work if you replace Array.From with Array.from.

I'd also suggest, for sanity's sake, to add a little .sort() right before map, like so: listeners: Object.keys(listeners).sort().map(key => {

Haven't tested with that ES6 mod but with OP's worked fine.

@danburzo

how to get all events on window itself? Right now I have:

['click', 'keyup', 'dragstart', 'dragend'].forEach(function (name) {
  window.addEventListener(name, function (ev) {
    console.log(name + ' event captured by content script:', ev);
    port.postMessage(name);
  });
});

but it would be nice to access a complete list of events programmatically (not hardcoded)

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