debugging JS file - Client Side code

Question

Is there any easy way in which we can know the sequence in which methods are called in runtime?

Example: In my JS File, I have around 15 methods. There are some Asynchronous calls. With Async calls we never know the sequence in which they are called and executed. So : I want to know, if there is a way in which we can debug (using developer tools, IE\Chrome\FF) .. any tool which tells me which async call was called first and the order in which they are called.

Thanks.

The easiest way isn't pretty, but add log statements to each function. Then just check the console and you'll see the order of the statements. — Ryan S, May 20 '14 at 14:19
For Firefox you can use `firebug`. Also IE, Chrome, and Firefox all have have built-in debuggers in their tool-sets. — Spencer Wieczorek, May 20 '14 at 14:25

score 2 · Answer 1 · answered May 20 '14 at 14:25

Using Chrome developer tools, you can use the Sources panel to debug javascript.

On the right side, you can add breakpoints for various types of events including XHR Breakpoints.

The execution will stop when the breakpoint is triggered and you can step through the execution flow.

I'm pretty sure Firefox and IE have similar tools.

score 0 · Answer 2 · answered May 20 '14 at 14:22

0

As ryan S suggested, using console.log can be a way of checking the sequence of code execution. So you can add console.log("1: [description]").

answered May 20 '14 at 14:22

cross

21
2

Thanks.... This idea is good. I need to add console.log for all my methods and check. But here's another question: Suppose the application is deployed in some other stage or prod server and i cannot modify the code. But I want to see the sequence of execution of methods for some trouble shooting purposes? Then how do we go about it? – user2598808 May 20 '14 at 14:25
This is more of a brute-force way, definitely not recommenced for proper debugging. – Spencer Wieczorek May 20 '14 at 14:28
Yeah, I'd also go with what Ali Gangji said - I just had a look and chrome has a nice set of tools for breakpoints, if you press F12 -> sources tab and find the resource you are looking for, it may be a bit finicky but it might help :) – cross May 20 '14 at 14:30

score 0 · Answer 3 · edited May 23 '17 at 12:05

Beside the given answers, you can also write a utility that will make wrap the methods of an object with logging:

It would be like this:

function addLogging(object) {   
    Object.keys(object).forEach(function (key) {
        if (typeof object[key] === 'function') {
            var originalFn = object[key];
            object[key] = function () {
                console.log('before calling', key);
                var result = originalFn.apply(this, arguments);
                console.log('after calling', key);
                return result;
            }
        }
    });
}

You can use lodash wrap method to help you.

Long ago I have answered a question regarding something similar like the above code: jQuery logger plugin

It didn't handle constructors perfectly, so it had problems like that. Here's the fixed resulting code.

You can also have a look at sinon.js, it provides spies and it can determine order of call of spied functions. But it might be a bit too much for just this, and it's might slow things down a little.

This method is a common thing done in aspect oriented programming. You can search about it and maybe try to use a AOP library. meld is a popular one.

Also instead of console.log in chrome you can use console.timeline, which gives you great visibility if used correctly.

debugging JS file - Client Side code

3 Answers3

Linked