How do I catch Javascript functions that are being called?

Question

I'm working with COGNOS, a very frustrating BI application that relies heavily on Javascript. Basically, when a <select> box is changed, the data on screen is refreshed, presumably by an AJAX function or something similar. I'd like to force this change using jQuery, but I'm not sure how to intercept the call it is making so I can duplicate it. There's also a metric ton of JS code, so it's hard to find by hand.

Is there a way using Firebug to display the different functions being called? Is my approach correct?

Answer 1

If you open the Firebug Script panel, on the top left there's a button that looks like a pause button on a TV remote: ||. That tells Firebug to pause on the next bit of JavaScript that runs. So I'd get the page open, ensure that the Script panel is enabled, click that button, then change the select box. That should trigger a breakpoint in Firebug, after which you can step through the code to figure out what's being called when.

Alternately, if you don't mind using a different tool, Google Chrome has a built-in debugger and inspector which can show you the event handlers attached to an element. So in Chrome, if you bring up the page, right-click the select box and choose Inspect Element, then on the right-hand side at the bottom there should be a list of the event handlers attached to it. That may be a bit easier to work with.

Finally, in either tool, if you can identify the bit of code in the guts that's actually causing the data reload (by looking for a URL, for instance, or an XmlHTTPRequest instance, or jQuery's .ajax, .post, .get, or .getJSON functions if it's using jquery), you can put a breakpoint on that and then trigger the select, then look at the call stack (on the right-hand side in both tools).

Good luck!