debug JS code which triggers an alert()

Question

I have a system which is built using the ext-js library. Part of the system lists orders that are flowing through an online store. When a row is clicked, additional order details are shown. A few days back, a message saying "FIXME: created panelID..." began to appear as soon as a row is clicked. After that, normal functioning continues, i.e. the error message is just annoying and doesn't break normal execution after it appears.

I am trying to debug the JS code to see under what circumstances does the error message appear, i.e. why did it suddenly start appearing. I am trying to do this with FireBug. Does anyone have any tips I could use to achieve my goal of establishing what line of code triggers the alert()? Any input on the matter is much appreciated.

Answer 1

Firebug has a command line API to programmatically create breakpoints. For example:

debug(fn);

creates a breakpoint to the function fn. Unfortunately this can't be used for functions with native code (built-in functions like alert). However, you can use this trick.

Insert a script block in your code with this script-

window.alert_ = window.alert;
window.alert = function() {
    alert_.apply(window,arguments)
};

What you've done is to redefine window.alert with your own which does the same thing.

Now attach the breakpoint in firebug with:

debug(alert);

Now the next time a script calls alert, you will get a breakpoint in your function. You can then analyze the stack trace and find out where it is getting called from.

Answer 2

Here's more cross-browser version of @chetan's answer

        window.alert_ = window.alert;
        window.alert = function () {
            debugger;
            alert_.apply(window, arguments);
        };

Answer 3

If you are able to recreate it, you can just put a break point at the line where the alert appears and view the stack trace and figure out the path.

If you can not recreate it, you need to find where the alert is coming from. After that look what calls that method and see what values need to be set. Walk your way up the path until you find the click event.

There is no real answer on debugging JavaScript since every application is coded differently. A lot of time it is manual labor of walking through code and figuring out what path it takes. Adding watches, console.logs, and alerts will be your friend in figuring out variable states. Add break points and walk through the code.