4

A certain HTML element when clicked does something. I cannot find which line adds that click event. Is there any tool to help?

Chrome dev tools > Elements > (select that element, see right panel) > Event Listeners > click，it lists a few js file with line numbers，but they are js plugins. What I need is which line decides that element to use those plugins.

I also tried to search .click( but 1) there are too many other elements assigned with click events 2) the line in question may be written in other syntax, eg: .on('click'

Ksthawma
  • 1,257
  • 1
  • 16
  • 28
  • http://stackoverflow.com/questions/10050465/set-a-javascript-breakpoint-in-code-in-chrome/23459325#23459325 – martynas May 11 '14 at 06:51
  • I am not sure if I understand this correctly. Do you mean to add a debugger line to the existing click event? But the question is how to find that existing click event line. – Ksthawma May 11 '14 at 07:12
  • No, I can find the DOM node, but where in js is the event handler added? – Ksthawma May 11 '14 at 08:09
  • [Edited] Sorry you are right. But that visual event does not find all events. I think it depends on how the event is written. – Ksthawma May 11 '14 at 08:22
  • For example, [link](http://www.nikon-asia.com/en_Asia/products/categories/dslr.page?) There are mouse over, mouse out events attached to 'Narrow By' that visual event fails to find. – Ksthawma May 11 '14 at 08:27
  • I don't think it's a duplicate of that question, what he wants is to find out what part of the script is adding the event listener – Slash May 15 '14 at 20:46

1 Answers1

1

Override the EventTarget addEventListener prototype like this, then add a breakpoint to the console.log and use chrome dev console, you'll be able to see the Stack trace and find out where it was added.

Just be sure to disable it after you have found the source

Add this before adding any events.

EventTarget.prototype.addEventListener = function(type,listener,useCapture) {
if (this.id === 'id of the element you are tracking')
    console.log('breakpoint!');
};

Sample usage: enter image description here

Slash
  • 496
  • 2
  • 8