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>

Answer 1

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)