Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Get all event listeners on the page in Google Chrome
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
// 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);
@julienetie

This comment has been minimized.

Copy link

commented Oct 4, 2016

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

@marcobiedermann

This comment has been minimized.

Copy link

commented Dec 9, 2016

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

This comment has been minimized.

Copy link

commented Jul 14, 2017

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

@nmaxcom

This comment has been minimized.

Copy link

commented Nov 28, 2017

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.

@ORESoftware

This comment has been minimized.

Copy link

commented Jan 2, 2018

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

@ndvbd

This comment has been minimized.

Copy link

commented Jun 9, 2018

Very cool!

@xxammuxx

This comment has been minimized.

Copy link

commented Jan 1, 2019

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

@samarpanda

This comment has been minimized.

Copy link

commented Feb 6, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.