31

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.

skeej
  • 840
  • 1
  • 8
  • 23
  • 2
    You know you can see the function called by an event in chrome, just select the element in inspector and check the tab that says Event Listenes on the right side, below styles – Ibu Nov 03 '11 at 19:47
  • yep- i checked that and there were no handlers for events based on user actions such click, focus. only load. seemed like a nifty feature but not much help in this case. – skeej Nov 03 '11 at 19:52
  • Can you execute code before the third party code is executed? – pimvdb Nov 03 '11 at 20:05
  • yes, I can. 75% of the third party component gets loaded in an iframe, so I can trigger some code when other dom elements are fully loaded earlier. – skeej Nov 03 '11 at 20:31
  • @skeej: Can you edit the iframe's page? If so, you could overwrite functions like `Element.prototype.addEventListener` to intercept added listeners. – pimvdb Nov 04 '11 at 08:06

2 Answers2

32

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.

Chiramisu
  • 4,687
  • 7
  • 47
  • 77
  • 12
    I don't think the OP is talking about load/AJAX events. Instead, he is talking about *user* events. – Randomblue Nov 05 '11 at 09:19
  • 4
    Funny that... sure sounded like he was to me. What a silly reason to downvote a perfectly good answer though. – Chiramisu Nov 05 '11 at 09:31
  • 1
    Updated? I don't see why. I literally performed the exact steps I listed before submitting my answer. The fact that Chrome can do this means it can obviously be done. Admittedly I've never wasted my time looking into how, because Chrome has always been good enough for my purposes. Cheers ;) – Chiramisu Nov 07 '11 at 17:15
  • 4
    Perfectly good answer. I use this all the time. It will show you not only AJAX (as Randomblue might suggest) but all click and DOM events as well. Very useful! – Willem Mulder Nov 15 '11 at 14:26
5

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.

Quintus Chen
  • 53
  • 1
  • 5