How to View Events Fired on an Element in Chrome Devtools

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

• 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)

How to see ALL events of a page in Chrome Developer Tools?

The monitorEvents has just worked for me. Simply run monitorEvents(object [, events]) in your console, e.g. monitorEvents(document.body, "dragenter") or for all events monitorEvents(document.body).

To stop it run unmonitorEvents(document.body).

From here: https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel

How to find out which JavaScript events fired?

Looks like Firebug (Firefox add-on) has the answer:

• open Firebug
• right click the element in HTML tab
• click Log Events
• enable Console tab
• click Persist in Console tab (otherwise Console tab will clear after the page is reloaded)
• select Closed (manually)

• there will be something like this in Console tab:

  ...
  mousemove clientX=1097, clientY=292
  popupshowing
  mousedown clientX=1097, clientY=292
  focus
  mouseup clientX=1097, clientY=292
  click clientX=1097, clientY=292
  mousemove clientX=1096, clientY=293
  ...
  

Source: Firebug Tip: Log Events

Chrome dev tools: How to see attached event listeners for an HTML element

The feature you are looking for is available in google chrome dev tools

I have taken, the jobs links in stack overflow page itself, it has a click event handler, to see the event handler, select the Event Listeners tab in the right part(hilighted in Red) there is a possibility that it might be hiddent by >> , click to expand,

If the ancestor checkbox is checked please uncheck this, then you will get the clear view of for which event (e.g click) , on what element (e.g anchor tag), and on right side on which file with line number, click it to navigate there.

Hope this is what you are looking for.

---

Related Topics