How do I view events fired on an element in Chrome DevTools?

290 Points
80 Posts

I have a customizable/dynamic form element on a page from a library. I want to see what javascript events are fired when I interact/click with it because I am trying to find out which event handler to use.

How do I do that using Chrome Web Developer?

Views: 10069
Total Answered: 1
Total Marked As Answer: 0
Posted On: 14-Nov-2017 04:24

Share:   fb twitter linkedin
404 Points
167 Posts
  1. Press F12 to open Dev Tools
  2. Click the Sources tab
  3. On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
  4. Click on the events you want to listen for.
  5. Interact with the target element, if they fire you will get a break point in the debugger

Similarly, you can right click on the target element -> select "inspect element" Scroll down on the right side of the dev frame, at the bottom is 'event listeners'. Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)

Posted On: 16-Dec-2017 02:10
 Log In to Chat