TILDebug and monitor DOM events

Debugging DOM event handlers is not an easy task but the Chrome Console Utilities API is here to help. This API is only accessible from the developer console.

Monitoring

The first difficulty is finding when an event is fired. Let's monitor all click events on the window.

monitorEvents(window, "click");

Now for every click, we will see a message with event details in the console

click MouseEvent {isTrusted: true, screenX: 1042, screenY: 449, clientX: 834, clientY: 276, …}

Clicking the arrow will expand the event object. A word of caution the values displayed represent the value at the time the object was expanded. Chrome console logs live view of objects. Expanding the object shows a snapshot of object values at the time of expansion.

Debugging

Next, let's find the function that fires after a certain event. For this we use getEventListeners

events = getEventListeners(document);

Let's add a breakpoint to all click listeners with debug

events.click.forEach(({ listener }) => debug(listener));

After we finish we could use undebug

events.click.forEach(({ listener }) => undebug(listener));