Catching the specific javascript code being executed onClick

Question

I am working on a site that has loads of legacy javascript and jquery includes and there is no documentation to show what is happening when.

I have a specific proble

Answer 1

None of the above answers worked for me. I am trying to use Firebug to figure out how a feature on a page is working for a site I have no control over. Here is what worked for me.

First, got the id of the element I am clicking on from the page source, and then get a temporary reference to it by creating a watch (under the script tab):

tmp=document.getElementById("idOfElement")

Next, I assigned the current onclick value to another temporary variable.

oldfunc=tmp.onclick

Next, I defined a new onclick function. Initially I tried putting debugger; as the first thing in the function, but this does not work! So instead, I created an alert:

tmp.onclick = function() { alert("Ok"); oldfunc() }

Now, as soon as I click on the button the alert comes up, at which point I then click the "Break on next" button as outlined in another answer to this question. Then I dismiss the alert and immediately I am in the debugger at the correct place.

In my case, the "Break on next" button did not work by itself, because there are a lot of other events, just mousing over the page was causing the breakpoint to be hit, preventing me from ever clicking the button.

Answer 2

The break button didn't work for me. Instead I did edit the onclick attribute with FireBug and prepended it with "debugger;" ... then you'll break right there once you click :)

Answer 3

In Firebug you can set a breakpoint in some JS and then you get a stack which will let you know the current function call stack. So if you set the breakpoint in function used by several handlers then you can use this to discover exactly which handler you are in.

This probably won't work if you are dealing with AJAX callbacks and the like though.

Answer 4

I believe there is a feature in Firebug's console window called Profile. Click profile, click the button, then click profile again. It should give you what all functions were called in that time. Be warned that if this code includes jQuery, you might get a huge long list of functions because jQuery uses tons in its code. Unfortunately, the profiler will also show anonymous functions, which can really be a pain.

Otherwise, do a search in the code for the button's class or ID and go through them. If you have an id of fancy then you might do a search for #fancy in your code and attempt to find it. That may lead you in a general direction, at least.

Answer 5

You can click Firebug's "Break on next" button (in the Script tab; it looks like a pause button), then push the button that you want to debug.

The next time any JavaScript code executes, Firebug will break into the debugger and show you that line of code.