805

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?

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
John Hoffman
  • 17,857
  • 20
  • 58
  • 81
  • 15
    This bookmarklet can be helpful: http://www.sprymedia.co.uk/article/Visual+Event+2 – scytale Oct 10 '12 at 12:11
  • 1
    The answer here is valuable, but the bookmarklet above ^ is actually what solved my problem. http://www.sprymedia.co.uk/article/Visual+Event+2 – Jazzy Jul 15 '14 at 20:39

6 Answers6

1146

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

Busti
  • 5,492
  • 2
  • 21
  • 34
Mariusz Pawelski
  • 25,983
  • 11
  • 67
  • 80
  • 4
    Agreed. This is the defacto way to monitor and track down events on *specific* elements. – dmackerman Apr 10 '15 at 18:49
  • 1
    Does this still work? I get "undefined" in the console when I type this and no monitoring seems to be occurring. – MSC Jul 10 '15 at 04:25
  • 1
    Ah yes I see. It was the "undefined" that was throwing me off but I now see you have the same in your helpful animated GIF. Thanks. – MSC Jul 11 '15 at 07:52
  • 1
    Is there a way to use as the page loads? – digout Aug 03 '15 at 16:59
  • 6
    which tool did u use to make gif – GorvGoyl Oct 17 '15 at 18:50
  • It only returns undefined in the same way any javascript function will return undefined if there's no return value. You can test in the node repl > `var silent = function() { };` undefined > `silent();` undefined > blah(); ReferenceError: blah is not defined – Toby Apr 22 '16 at 01:32
  • 13
    Every so often you come across a tip which feels like a level-up. This is one of those times. – A Fader Darkly Apr 23 '16 at 13:49
  • 8
    @MariuszPawelski How to proceed from here? I did this and found the click event, which was the event I was interested in. But how do I find what happens when I click on the element? What kind of code gets executed? Which property of `MouseEvent` should I be searching for? – Utku Oct 28 '16 at 09:47
  • 5
    but where to find handler e.g click handler. – Sheikh Abdul Wahid Apr 18 '17 at 15:48
  • 1
    The `undefined` notice is so confusing. Instead it should show `ready` in the console ... – Avatar Oct 11 '17 at 07:29
  • Not in window but in extension area or particular extension – ThinkTank Jul 12 '19 at 10:18
  • 1
    Thanks for `$0` trick (getting the current selected element in elements panel). – yaya Aug 31 '20 at 21:58
  • Just a note: if you think this isn't working, make sure you don't have a filter condition set. The filter box should say "Filter", not anything else. – user1944491 Apr 13 '21 at 18:14
  • 1
    @Nakilon Write `unmonitorEvents($0)`, where `$0` is element you passed to `monitorEvents`. It's mentioned in the answer. – Mariusz Pawelski Aug 11 '21 at 12:08
  • 1
    @SheikhAbdulWahid and anyone looking for the click handler, when you inspect the element, you can see the elements tab, and a section that shows the styles on the element. Next to styles is a 'Event Listener' tab. https://umaar.com/dev-tips/24-view-event-listeners/ – Frazer Kirkman Apr 11 '22 at 19:16
  • Is there a way to monitorEvents before the page loads? – Tofandel Sep 06 '22 at 09:03
1068
  • 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)

Charlie
  • 11,380
  • 19
  • 83
  • 138
Matt
  • 41,216
  • 30
  • 109
  • 147
  • 12
    this solution is a problem if it is mouse events you are after, as the breakpoint kills the flow – WendyG May 14 '14 at 13:11
  • 80
    what if all events point to minified jquery i dont care about, how do i reach the function that uses that jquery. – Muhammad Umer Oct 01 '14 at 19:15
  • 24
    Can it show custom events which were created by me? When I read that it changed lives that was the first thing I thought about. Do I miss something? – Tebe Oct 24 '14 at 08:06
  • 28
    @MuhammadUmer You can blackbox jQuery so Chrome will skip it and go straight to your source code. https://developer.chrome.com/devtools/docs/blackboxing – Matt Zeunert Feb 12 '16 at 21:22
  • I checked the framework listeners of the event listeners but still don't see the event listeners for Backbone. Any ideas? – akantoword May 04 '16 at 19:09
  • To escape out of jquery, simply step out of each function call until you arrive at your own. Shift-F11 is "Step Out" – Nacht Oct 02 '18 at 06:56
  • There are a multitude of events that fire in a row. Breaking on one may cause issues and not allow other events to fire. – RoboticRenaissance Jun 01 '20 at 18:35
  • @WendyG `this solution is a problem if it is mouse events you are after` so what is the solution? – JinSnow Jun 20 '21 at 10:37
31

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.

tifkin
  • 526
  • 6
  • 14
27

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

Daniel Sokolowski
  • 11,982
  • 4
  • 69
  • 55
  • 8
    Trying this in 2021 and I'm just getting 'undefined' in the Console output when trying this syntax. Any ideas? Still can't find out how to see which custom jQuery events are attached to a particular element :( – Kevin Dark Oct 12 '21 at 09:21
15

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"

airtonix
  • 4,772
  • 2
  • 38
  • 36
  • 35
    How then, does one find those events? – Calydon Nov 21 '15 at 00:45
  • 19
    In Soviet Chrome, those events find you – Eric Burel May 27 '21 at 12:55
  • @Calydon if you look at the code block i posted, these kind of events you fire with jquery will only be found in the console if you track them yourself in your code. I forget if these are CustomEvents in jquery or some special internal-jquery-only-implementation I don't think DevTools will ever give us a proper UI to see registered CustomEvents or registered-jquery-events. – airtonix Feb 07 '23 at 21:36
2

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)

Kiritushka
  • 770
  • 1
  • 6
  • 11