165

Lets suppose I've a link on my page:

<a href="#" id="foo">Click Here</a>

I don't know anything else, but when I click on the link, an alert("bar") is displayed. So I know that somewhere, some code is getting bound to #foo.

How can I find the code that is binding the alert("bar") to the click event? I'm looking for a solution with Chrome.

Ps.: The example is fictive, so I'm not looking for solution like: "Use XXXXXX and search the whole project for "alert(\"bar\")". I want a real debugging/tracing solution.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
FMaz008
  • 11,161
  • 19
  • 68
  • 100

8 Answers8

151

Using Chrome 15.0.865.0 dev. There's an "Event Listeners" section on the Elements panel:

enter image description here

And an "Event Listeners Breakpoints" on the Scripts panel. Use a Mouse -> click breakpoint and then "step into next function call" while keeping an eye on the call stack to see what userland function handles the event. Ideally, you'd replace the minified version of jQuery with an unminified one so that you don't have to step in all the time, and use step over when possible.

enter image description here

Ionuț G. Stan
  • 176,118
  • 18
  • 189
  • 202
  • 11
    Getting closer, but most of the results in there are pointing to the line 16 of... jquery.min.js :( ( I understand why, no need to explain, but how can we find who called the bind() method of jQuery ? – FMaz008 Sep 07 '11 at 18:03
  • Those tools are all available in Chrome 12.0.742.100 too. :) Thanks ! – FMaz008 Sep 07 '11 at 18:56
  • 13
    @Fluffy: You don't have to. Just klick the `{ }` symbol in the left bottom corner when viewing js. Magic. – Hannes Schneidermayer Mar 19 '14 at 12:18
  • Stepping through jQuery's complex event dispatching code is a big pain. The jQuery Audit answer below (http://stackoverflow.com/a/30487583/24267) is so much better. – mhenry1384 Oct 26 '15 at 20:04
  • All of those solutions still don't cut it for me. Because of this issue I started debugging in Firefox. You just inspect the element in standard Elements panel and there's a small but fantastic "ev" button next to the element (if there is actually any event on it). You click it, it lists the handlers, you click on a handler and voila! Magnificent! – userfuser Nov 03 '15 at 13:47
  • @Heanz I don't know what Fluffy asked, but I sure do love the `{ }` symbol now! – Howie Jan 22 '16 at 06:43
  • hi i want click for event from my functions js file not jquery and other to be debugged how to do that please – shareef Jul 15 '16 at 14:34
  • 4
    To exclude jquery from the call stack, black box the script: https://developer.chrome.com/devtools/docs/blackboxing @IonuțG.Stan, or mods, can you update the answer with a reference to blackboxing -- seems to be a common question relevant to this answer. – Chris Hynes Sep 26 '16 at 15:30
  • @FMaz008 for the latest version of chrome you have to tick the "Framework listeners" to show you the exact javascript file who called the bind instead of the jquery file. – lovelyramos Nov 17 '17 at 07:39
50

You can also use Chrome's inspector to find attached events another way, as follows:

  1. Right click on the element to inspect, or find it in the 'Elements' pane.
  2. Then in the 'Event Listeners' tab/pane, expand the event (eg 'click')
  3. Expand the various sub-nodes to find the one you want, and then look for where the 'handler' sub-node is.
  4. Right click the word 'function', and then click 'Show function definition'

This will take you to where the handler was defined, as demonstrated in the following image, and explained by Paul Irish here: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

'Show Function definition'

Matty J
  • 3,116
  • 32
  • 31
17

Give it a try to the jQuery Audit extension (https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg), after installing follow these steps:

  1. Inspect the element
  2. On the new 'jQuery Audit' tab expand the Events property
  3. Choose for the Event you need
  4. From the handler property, right click over function and select 'Show function definition'
  5. You will now see the Event binding code
  6. Click on the 'Pretty print' button for a more readable view of the code
Javier Armendariz
  • 299
  • 3
  • 4
  • 1
    This is an excellent extension and saves loads of time sifting through JavaScript. – Neil Monroe Nov 11 '15 at 15:58
  • I often find that "Event Listeners" lists "No event listeners", and that selecting "Event listener breakpoints" > Mouse > Click does not create a breakpoint. This plugin works very well. – StuartN Nov 23 '15 at 18:05
  • @Javier > it is a great response. Does it work for a javascript (non jQuery) mecanisme? – Mahefa Jun 24 '20 at 15:55
15

(Latest as of 2022) For version Chrome Version Version 99:

Chrome Developer Tools - Event Listener

  1. Select the element you want to inspect

  2. Choose the Event Listeners tab

  3. Make sure to check the Framework listeners to show the real javascript file instead of the jquery function.

lovelyramos
  • 9,379
  • 1
  • 17
  • 18
7

2018 Update - Might be helpful for future readers:

I am not sure when this was originally introduced in Chrome. But another (easy) way this can be done now in Chrome is via console commands.

For example: (in chrome console type)

getEventListeners($0)

Whereas $0 is the selected element in the DOM.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

enter image description here

khollenbeck
  • 16,028
  • 18
  • 66
  • 101
6

Edit: in lieu of my own answer, this one is quite excellent: How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

Google Chromes developer tools has a search function built into the scripts section

If you are unfamiliar with this tool: (just in case)

  • right click anywhere on a page (in chrome)
  • click 'Inspect Element'
  • click the 'Scripts' tab
  • Search bar in the top right

Doing a quick search for the #ID should take you to the binding function eventually.

Ex: searching for #foo would take you to 

$('#foo').click(function(){ alert('bar'); })

enter image description here

Community
  • 1
  • 1
Michael Jasper
  • 7,962
  • 4
  • 40
  • 60
  • 4
    Nice start, but what if I have 1500 references to #foo, most of them that are not binding anything, or in the case where I have multiple #foo IDs in external scripts that are not triggered in the present case ? – FMaz008 Sep 07 '11 at 17:54
  • Great question. In my experience, that's where the human debugging process usually starts :) – Michael Jasper Sep 07 '11 at 18:05
  • 1
    Hehe, you're right, but my question was also about what I must do as a human :p – FMaz008 Sep 07 '11 at 18:57
5

findEventHandlers is a jquery plugin, the raw code is here: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

Steps

  1. Paste the raw code directely into chrome's console(note:must have jquery loaded already)

  2. Use the following function call: findEventHandlers(eventType, selector);
    to find the corresponding's selector specified element's eventType handler.

Example:

findEventHandlers("click", "#clickThis");

Then if any, the available event handler will show bellow, you need to expand to find the handler, right click the function and select show function definition

See: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

unifreak
  • 773
  • 6
  • 17
3

For Chrome Version 52.0.2743.116:

  1. In Chrome's Developer Tools, bring up the 'Search' panel by hitting Ctrl+Shift+F.

  2. Type in the name of the element you're trying to find.

Results for binded elements should appear in the panel and state the file they're located in.

Ghost Echo
  • 1,997
  • 4
  • 31
  • 46