Record Or Log All Browser Dom/jquery Event(s)

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, focu

Solution 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.

Solution 2:

In Chrome you can use monitorEvents() in the console of dev tools to record all the events that you would like to monitor triggered during your test.