如何查看chrome中infor循环的javascript的每一步？

Question

I found in chrome, can't see every step of the for in loop. for example, using chrome's or chrome canary's debugger, set a break point in the line

for (var i in stuff)

of the following code,when paused,and click step into untill the line

return n;

you can see the for in loop will finish one time.I want to see the entire process of for in loop. so the question is: how to see every step of javascript for in loop in chrome?

function objectPlus(o, stuff) {
    var n;
    function F() {}
    F.prototype = o;
    n = new F();
    n.uber = o;

    for (var i in stuff) {
        // I found in debuger, for in loop will finish in one step into,so you can't see the process of every property copy
        n[i] = stuff[i];
    }

    return n;
}

var shape = {
    name: 'shape',
    toString: function() {
        return this.name;
    }
};

var twoDee = objectPlus(shape, {
    name: '2D shape',
    toString: function() {
        return this.uber.toString() + ', ' + this.name;
    }
});

Answer 1

Click on Sources and JS will be displayed.

Click on the target js file

On the left hand side - Line numbers will appear

Click on the line number on which you want breakpoint / pause

Function Key --> F11 - and if you want to see the output put a console.log inside your for loop --> console.log(n[i])