Jacob S Jacob S - 5 months ago 12
Javascript Question

Compare stack traces (Chrome Developer Tools)

Let's say I have a JavaScript program which does something with an object and which I run twice, with different objects.

Is it somehow possible to automatically compare/diff the stack traces of the two runs, when I debug the program using Chrome Developer Tools? The idea behind my request is that if I debug an unknown program, I want to know the difference if how the different objects are handled, e.g. at which point in the program the difference is detected.

If the program is big enough it can be very annoying to debug both runs manually and try to remember where the difference(s) happen(ed).

Answer

You need to specify the point in execution where the call stack should be ouput. If both paths end in the same function, you can put a console.trace() call in the last one and you will get a stack output for both of them in the Console.

Example:

var objA = { type: "a", val: 1 };
var objB = { type: "b", val: 2 };

function doSomething() {
    console.log("do something");
    doFinalThing(); 
}

function doSomethingElse() {
    console.log("do something else");
    doFinalThing();
}

function doFinalThing() {
    console.trace();
}

function init(obj) {
    if (obj.type == "a") { 
        doSomething();
    } else { 
        doSomethingElse();
    }
}

init(objA);
init(objB);

enter image description here