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

javascript google-chrome-devtools
John Hoffman picture John Hoffman · Apr 18, 2012 · Viewed 436.1k times · Source

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

How do I do that using Chrome Web Developer?

Answer

Matt picture Matt · Apr 18, 2012
  • Hit 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)

Related questions

How do you launch the JavaScript debugger in Google Chrome?

When using Google Chrome, I want to debug some JavaScript code. How can I do that?

Read More
How do I debug Node.js applications?

How do I debug a Node.js server application? Right now I'm mostly using alert debugging with print statements like this: sys.puts(sys.inspect(someVariable)); There must be a better way to debug. I know that Google Chrome has …

Read More
jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)

I'm seeing error messages about a file, min.map, being not found: GET jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found) Screenshot Where is this coming from?

Read More