Use Chrome's webkit inspector to remove an event listener

Tarang picture Tarang · Jun 13, 2012 · Viewed 13.8k times · Source

I know you can see the event listeners in the Chrome Inspector but i'm doing some debugging work and there are so many event listeners lying around I'd like to disable some without editing the code

enter image description here

Is there a way to disable an event listener quickly from the Webkit inspector?

Perhaps have a look and type some code into the console to removeEventListener the listener? How would I do this? For instance how would i remove the 'click' listener above

Answer

Jackson picture Jackson · Aug 24, 2015

You can use getEventListeners(element).click[index].listener to get a reference to a listener (in a WebKit console).

So, to remove the first listener, you could do:

document.removeEventListener('click', getEventListeners(document).click[0].listener)

Similarly, to remove all listeners, you could use this function:

function removeEventListeners(element, listenerMap) {
    Object.keys(listenerMap).forEach(function (name) {
        var listeners = listenerMap[name];
        listeners.forEach(function (object) {
            element.removeEventListener(name, object.listener);
        });
    });
}

removeEventListeners(document, getEventListeners(document))