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
Copy link

julienetie commented Oct 4, 2016

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

@marcobiedermann
Copy link

marcobiedermann 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
Copy link

ilyazub commented Jul 14, 2017

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

@nmaxcom
Copy link

nmaxcom 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
Copy link

ORESoftware 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
Copy link

ndvbd commented Jun 9, 2018

Very cool!

@xxammuxx
Copy link

xxammuxx 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
Copy link

samarpanda 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.

@alex2844
Copy link

alex2844 commented Sep 29, 2019

@preflight
Copy link

preflight commented Oct 16, 2019

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"

@ochen1
Copy link

ochen1 commented Apr 25, 2020

👍 Thank you! :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment