How do you trace and visualize JavaScript Promises?

Question

In writing a fairly large JavaScript module with lots of async operation all dealing with promises, it becomes quite difficult to debug and follow the flow/state of promises.

Are there any tools or frameworks for instrumenting tests or module code to give he a flow of all the Promises in my system? I'm using jQuery promises if it matters at all.

Answer 1

Off the top of my head, and stimulated by @MrLeap's idea to send messages to the console, how about a creating Deferreds via an "adapter" of your own design.

eg (embryonic and untested) :

var debugMode = true;

function DeferredAdapter(name) {
    var dfrd = $.Deferred();
    if(debugMode) {
        dfrd.notify = function() {
            console.log(name + ': notify');
            if (arguments[0] && typeof arguments[0] == "string")
                console.log(arguments[0]);
        };
        //similar for resolve
        //similar for reject
    }
    return dfrd;
}

This way (when you've got it working), you can do extra stuff when debugging, with a simple mechanism to turn off the extra stuff in production code, without the need to go through all your code purging console.log() statements.