CODEWITHSUNDEEP
javascriptdom-eventsgoogle-chrome-devtools
John Hoffman
John Hoffman

Reputation: 18647

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

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?

Upvotes: 848

Views: 729011

Answers (7)

Christian
Christian

Reputation: 28164

I want to see what JavaScript events are fired when I interact with it

Despite the many answers (which are not exactly accurate), the right answer to that question is that you can't.

There is no way to listen for all events upfront.

As far as I am aware, that also applies to browser dev tools (or at least chrome's).

It is possible to get a list of standard event names with the following code, however it only work on the premise that (1) event names will always coincide with old-style event attributes and (2) that the event name matches with the attribute name (with "on" prefix):

function getStandardEventNames(element) {
  const eventNames = [];
  for (const prop in element) {
    if (!prop.startsWith("on")) {
      continue;
    }

    const eventName = prop.slice(2); 
    try {
      new Event(eventName);
      eventNames.push(eventName);
    } catch {
      // if an error is thrown, it's not a valid event name
    }
  }

  return eventNames;
}

getStandardEventNames(document.body); // or window or specific element

You can then use that function with monitorEvents() (as mentioned in the other answer), but that of course will not work for custom events.

For custom events, the following code is a sneaky way of solving this:

const originalEventDispatcher = Element.prototype.dispatchEvent;
Element.prototype.dispatchEvent = function(event) {
  console.log(`Dispatching ${event.type} event:`, event);
  return originalEventDispatcher.call(this, event);
};

That works on the premise that custom events and custom code will call element.dispatchEvent - it will not work for events triggered by the browser, for example.

Upvotes: 1

Mariusz Pawelski
Mariusz Pawelski

Reputation: 28932

You can use monitorEvents function.

Just inspect your element (right mouse click → Inspect on visible element or go to Elements tab in Chrome Developer Tools and select wanted element) then go to Console tab and write:

monitorEvents($0)

Now when you move mouse over this element, focus or click it, the name of the fired event will be displayed with its data.

To stop getting this data just write this to console:

unmonitorEvents($0)

$0 is just the last DOM element selected by Chrome Developer Tools. You can pass any other DOM object there (for example result of getElementById or querySelector).

You can also specify event "type" as second parameter to narrow monitored events to some predefined set. For example:

monitorEvents(document.body, 'mouse')

List of this available types is the following as of 2023-01-30:

  • mouse
    "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
  • key
    "keydown", "keyup", "keypress", "textInput"
  • touch
    "touchstart", "touchmove", "touchend", "touchcancel"
  • control
    "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

Taken from here.

I made a small gif that illustrates how this feature works:

usage of monitorEvents function

Upvotes: 1238

Kiritushka
Kiritushka

Reputation: 1140

To list all event handlers on the window object in Chrome, you can type window.getEventListeners(window) or for a specific element window.getEventListeners(document.body)

Upvotes: 4

Daniel Sokolowski
Daniel Sokolowski

Reputation: 12488

For jQuery (at least version 1.11.2) the following procedure worked for me.

  1. Right click on the element and open 'Chrome Developer Tools'
  2. Type $._data(($0), 'events'); in the 'Console'
  3. Expand the attached objects and double click the handler: value.
  4. This shows the source code of the attached function, search for part of that using the 'Search' tab.

And it's time to stop re-inventing the wheel and start using vanilla JS events ... :)

how-to-find-jquery-click-handler-function

Upvotes: 27

tifkin
tifkin

Reputation: 526

Visual Event is a nice little bookmarklet that you can use to view an element's event handlers. On online demo can be viewed here.

Upvotes: 31

Matt
Matt

Reputation: 41832

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

Upvotes: 1093

airtonix
airtonix

Reputation: 5169

This won't show custom events like those your script might create if it's a jquery plugin. for example : 

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

The Event Panel under Scripts in chrome developer tools will not show you "Something:custom-event-one"

Upvotes: 14

Related Questions