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

beginer

Member

1328 Points

43 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: 11086
Total Answered: 1
Total Marked As Answer: 0
Posted On: 14-Nov-2017 04:24

Share:

Answers

Jak

Member

858 Points

132 Posts

Press F12 to open Dev Tools
Click the Sources tab
On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
Click on the events you want to listen for.
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