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 detail

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

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.

Answer 3

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

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