set breakpoint to html element?

Question

for example I have button element, the click event is attached to id in XXX.js file (I don't know the file name) , and I have many .js files. I want to debug the button click but how can I figure out where to set breakpoint if i don't know where button click function is ? is there any way to set breakpoint on element ( I'm using firebug, if it's impossible on firebug and possible for any other add-on please tell)

I'm using EXT sencha to add eventhandlers

How are you attaching a click handler? With `jQuery`, `addEventListener`, `attachEvent`? Chrome's developer tools will show you events bount to the element. jQuery keep an internal reference for binding as well. — Sampson, Dec 24 '13 at 16:30
Check out the answer to this question: http://stackoverflow.com/questions/11065358/find-attached-bound-events-of-an-element-using-chrome-development-tools-fire — Martin Hansen Lennox, Dec 24 '13 at 16:32

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Events handled with `addEventListener`:

Using your browser's developer tools, you can often times inspect an element to see what events are bound to it, and from which source file. For instance, the following example shows a click event bound to my button element:

enter image description here

Events handled with jQuery's `$.fn.on`:

If you bound the handler using jQuery's $.fn.on method, you can look into its internal $._data collection to determine what events handled for which elements:

enter image description here

score 1 · Accepted Answer · answered Dec 24 '13 at 16:31

1

I would check out this plugin. That will help you find what file/where the bound event lives. Then you can debug from there. http://www.sprymedia.co.uk/article/Visual+Event+2

answered Dec 24 '13 at 16:31

user2923779

230
1
4

Not sure why this has been downvoted/flagged. This is just as valid an approach as using Chrome dev tools. – Herb Caudill Dec 24 '13 at 19:18

score 1 · Answer 3 · answered Dec 24 '13 at 16:34

1

If you want to know the js file with the listener, use Chrome dev tool, Inspect Element > On the Event Listeners you will find attached listeners and the file and even highlight the code on clicking. I don't know if this feature is in firebug too

answered Dec 24 '13 at 16:34

Issam Zoli

2,724
1
21
35

score 1 · Answer 4 · answered Dec 24 '13 at 16:34

1

Chrome Development Tools provides an Event Listener, which shows you elements and the attached Js-Events. Not quite sure if it helps you with your specific problem.

answered Dec 24 '13 at 16:34

magic_al

1,930
1
18
26

score 0 · Answer 5 · answered Dec 25 '13 at 09:02

Firebug implements the getEventListeners command that returns every event listeners for every events for a node:

http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-geteventlisteners-command/

Also there is the EventBug extension, that offers a UI:

https://getfirebug.com/wiki/index.php/Firebug_Extensions#Eventbug

set breakpoint to html element?

5 Answers5

Events handled with addEventListener:

Events handled with jQuery's $.fn.on:

Events handled with `addEventListener`:

Events handled with jQuery's `$.fn.on`: