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

beginer
beginer
1544 Points
52 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: 11275
Total Answered: 1
Total Marked As Answer: 0
Posted On: 14-Nov-2017 04:24

Share:   fb twitter linkedin
Answers
Jak
Jak
908 Points
132 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