How to see which events are being fired in Google Chrome's console?

Question

How do I see which events are being fired in Google Chrome's console? When I click the button I want to see which events are being fire in Google Chrome's console. How would I do that?

<input type="submit" value="Submit" id = "button" onclick="clickThisButton()">

<script>
function clickThisButton() {
document.getElementById("button").value = "Submitted";
} //end of function clickThisButton()
</script>

@brk Yeah, I want to see the which functions are being executed. — frosty, Aug 31 '19 at 05:00
You want to see which function is being executed for a specific event? Or, you want a list of all the events being fired? If you open the console, highlight an element and then click the "Event Listeners" tab on the right, you will see a list of events and current listening functions. — 2pha, Aug 31 '19 at 05:18

CertainPerformance · Answer 1 · 2019-08-31T05:08:35.167

You can get a list of all events, and then attach a listener to each one.

If you want to make sure the listener runs, attach it to the window in the capturing phase, so it won't be stopped via stopPropagation:

const frequentEvents = ['animationstart', 'animationend', 'scroll'];

for (const prop in window) {
  if (/^on/.test(prop)) {
    const eventName = prop.slice(2);
    window.addEventListener(
      eventName,
      () => {
        // these events run frequently, logging them will clog the snippet
        if (!frequentEvents.includes(eventName)) {
          console.log('event:', eventName);
        }
      },
      true // capturing phase
    );
  }
}

The page may still stop the listener from running if it has its own listener on window in the capturing phase and it calls stopImmediatePropagation, and that listener gets attached before your listener here. To prevent that, make sure your listener gets attached first (like with @run-at document-start in a userscript, to ensure your script runs before anything else).

If you also need to see which listeners the page adds to each event, you can monkeypatch addEventListener and each .on- setter so you can examine the function before it gets added (though this won't detect inline handlers, like in your code)

How to see which events are being fired in Google Chrome's console?

1 Answers1