A simple way to debug memory leaks of event listeners using Chrome Dev Tools

The memory leaks are very hard to find. And if you faced with that problem you can start with analyzing event listeners.

So that very easy you just need to store all HTML elements on the page and make a snapshot of events using a getEventListeners(object) method

After that, you can manipulate with DOM and make a snapshot again and compare with previous

// Store all elements on page 
allElements = [...document.querySelectorAll('*')]

// Then make a snapshot of all listeners
allElements.map(el => [el, ...Object.keys(getEventListeners(el))]).filter((e) => e[1]);

// After that, make some manipulations on page

// Finally print a snapshot and analyze it
allElements.map(el => [el, ...Object.keys(getEventListeners(el))]).filter((e) => e[1]);

I the next example I will hide one cat picture and check that pointerdown and wheel events will be removed:

if you have any question I am glad to discuss them in the comments!

(c) MurAmur