Debug JS file - client code

Question

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

Example. In my JS file, I have about 15 methods. There are 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 we can debug (using the developer tools, IE \ Chrome \ FF) .. any tool that tells me which asynchronous call was called first and the order in which they are called.

Thanks.

Answer 1

Using the 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.

Execution will stop when a breakpoint is triggered, and you can execute the execution thread.

I'm sure Firefox and IE have similar tools.

Answer 2

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

Answer 3

In addition to these answers, you can also write a utility that will wrap the methods of the object with logging:

It will 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 to help you.

I have long answered the question about something similar, like the code above: jQuery logger plugin

He did not handle the constructors perfectly, so he had such problems. The resulting code is fixed here.

You can also look at sinon.js , it provides spyware and can determine the order in which spied functions are called. But there can be too much for this, and it can slow down a little.

This method is common in aspect programming . You can search about this and maybe try using the AOP library. meld is popular.

Also, instead of console.log in chrome, you can use console.timeline , which gives you greater visibility when used properly.