Javascript debugging: pause on click event

Question

I'm debugging a web page and want a way to pause the JS execution of an oonclick handler of an element, where I don't really know who is the handler or when is the handler being registered.

Is there something like a pause button (such as in Visual Studio) on any of the browsers debuggers that pauses the JS execution once a user event is triggered?

Thanks

Answer 1

Yes, my personal favorite is Firebug for Firefox. On the "Script" tab you can click the pause button "break on next", and you can also do other nice things such as browse the HTML (using the "HTML tab"), right click on a selector and select one of Break on Attribute Change/Child Addition or Removal/Element Removal. I tend to use that when I really have no idea which script is interfering with my DOM.

The only thing to bear in mind is that something like "break on next" is next to pointless if you have an event on mouseover at the document level for example, as you'll then just be constantly breaking.

You could also look at some solutions to finding all logged events, but I don't think there's a simple way of asking JavaScript "what click event is bound to this DOM element" without calling it directly. If you're using jQuery then it does get a little easier as this answer suggests.

Answer 2

Along with Ian Clark's answer for using Firebug, in Chrome you can go to the Sources tab in the Developer Tools window (F12) and the controls for debugging are there.