By John Hoffman


2012-04-18 16:23:22 8 Comments

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?

5 comments

@Daniel Sokolowski 2016-07-14 15:11:53

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

@Mariusz Pawelski 2013-04-10 10:50:36

You can use monitorEvents function.

Just inspect your element (right mouse clickInspect 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 here.

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

usage of monitorEvents function

@llamerr 2014-04-02 11:09:34

this answer is a lot better and does exactly what was asked (maybe that feature was not available in 2012)

@dmackerman 2015-04-10 18:49:35

Agreed. This is the defacto way to monitor and track down events on specific elements.

@MSC 2015-07-10 04:25:22

Does this still work? I get "undefined" in the console when I type this and no monitoring seems to be occurring.

@MSC 2015-07-11 07:52:43

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.

@digout 2015-08-03 16:59:46

Is there a way to use as the page loads?

@JerryGoyal 2015-10-17 18:50:06

which tool did u use to make gif

@Toby 2016-04-22 01:32:59

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

@A Fader Darkly 2016-04-23 13:49:34

Every so often you come across a tip which feels like a level-up. This is one of those times.

@Utku 2016-10-28 09:47:18

@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?

@Sheikh Abdul Wahid 2017-04-18 15:48:12

but where to find handler e.g click handler.

@Kai Noack 2017-10-11 07:29:21

The undefined notice is so confusing. Instead it should show ready in the console ...

@ThinkTank 2019-07-12 10:18:52

Not in window but in extension area or particular extension

@tifkin 2014-03-21 20:12:51

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.

@shyammakwana.me 2016-02-26 06:14:57

it can't be used as a swiss army tool. from my view it's for newbies.

@Matt 2012-04-18 16:29:12

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

@WendyG 2014-05-14 13:11:54

this solution is a problem if it is mouse events you are after, as the breakpoint kills the flow

@Muhammad Umer 2014-10-01 19:15:27

what if all events point to minified jquery i dont care about, how do i reach the function that uses that jquery.

@Tebe 2014-10-24 08:06:38

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?

@Matt Zeunert 2016-02-12 21:22:23

@MuhammadUmer You can blackbox jQuery so Chrome will skip it and go straight to your source code. developer.chrome.com/devtools/docs/blackboxing

@akantoword 2016-05-04 19:09:41

I checked the framework listeners of the event listeners but still don't see the event listeners for Backbone. Any ideas?

@John Balvin Arias 2018-06-11 04:53:07

@MuhammadUmer what if you just stop using JQuery?

@Nacht - Reinstate Monica 2018-10-02 06:56:14

To escape out of jquery, simply step out of each function call until you arrive at your own. Shift-F11 is "Step Out"

@airtonix 2012-07-15 23:42:22

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"

@Calydon 2015-11-21 00:45:51

How then, does one find those events?

Related Questions

Sponsored Content

93 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 6242558 View
  • 7797 Score
  • 93 Answer
  • Tags:   javascript arrays

56 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

27 Answered Questions

[SOLVED] Trigger a button click with JavaScript on the Enter key in a text box

49 Answered Questions

[SOLVED] Convert form data to JavaScript object with jQuery

30 Answered Questions

[SOLVED] Is JavaScript a pass-by-reference or pass-by-value language?

18 Answered Questions

13 Answered Questions

[SOLVED] event.preventDefault() vs. return false

17 Answered Questions

[SOLVED] How to decide when to use Node.js?

16 Answered Questions

[SOLVED] How do I find out which DOM element has the focus?

  • 2009-01-30 20:21:31
  • Tony Peterson
  • 634247 View
  • 1253 Score
  • 16 Answer
  • Tags:   javascript dom

15 Answered Questions

Sponsored Content