Question

I am building a fairly large application in Javascript. It is a single page that can change different views. All the views have their own variables, events, listeners, elements, etc.

When working with large collections and multiple events it’s sometimes good to know what exactly is happening on the page.

I know all the browsers have developer tools, but sometimes it’s hard to click trough all the elements etc. And some options I can not find.

One thing I am interested in is to know how many events there currently listened for on the page. This way I can confirm that I am not creating zombies.

If the sollution is a developer tool, please let me know where to look and what to do. And most important, which browser to choose.

Answer 1

The best way to do this in Chrome is to use getEventListeners, which is part of the devtools API. (Note: this is only accessible to a developer in devtools, not accessible to a normal script in a page.)

You can use document.querySelectorAll('*') to grab all elements on a page, and run them each through getEventListeners to get their event listeners. Another answer by Mr.Raindrop has several suggestions and approaches of how to do this in practice.