Record or log all browser DOM/JQuery Event(s)

Question

I had a problem of needing to do some stuff programmatically (in javascript) that was happening in a third party component after being triggered by some browser events (click, focus, ?). I didn't know the event type, the element that the event was bound to, or the proper parameters.

-Tried setting Chrome breakpoints on subtree modifications, but nothing worked.
-Tried checking for jQuery events, but data('events') didn't reveal anything useful- they must be using DOM events.

Shouldn't there be some way of recording/capturing/logging all the events in a browser and then checking them (or even playing them back)? That seems like the only way to find out what I want to find out.

Answer 1

Updated for 2021

You can do this in any Chromium-based browser (e.g. Brave, Dissenter, Edge, etc.):

1. Open the "Developer Tools" (F12 or Ctrl+Shift+I) from the Ellipsis (...) menu.
2. Go to the "Network" tab.
3. Click the little Record button at the left.
4. Refresh the page and/or perform actions to trigger desired events.

Refreshing will show you the sequence of load events, and you can also filter for AJAX, JS, and other types of events. Or you can set breakpoints in the Sources tab for certain user events that happen when you mouse-over stuff, etc.