What is step into, step out and step over in Firebug? [duplicate]

Answer 1

• Step into will cause the debugger to descend into any method calls on the current line. If there are multiple method calls, they'll be visited in order of execution; if there are no method calls, this is same as step over. This is broadly equivalent to following every individual line of execution as would be seen by the interpreter.
• Step over proceeds to the next line in your current scope (i.e. it goes to the next line), without descending into any method calls on the way. This is generally used for following the logic through a particular method without worrying about the details of its collaborators, and can be useful for finding at what point in a method the expected conditions are violated.
• Step out proceeds until the next "return" or equivalent - i.e. until control has returned to the preceding stack frame. This is generally used when you've seen all you need to at this point/method, and want to bubble up the stack a few layers to where the value is actually used.

Imagine the following code, which entered through main() and is now on the first line of bar:

function main() {
   val s = foo();
   bar(s);
}

function foo() {
   return "hi";
}

function bar(s) {
   val t = s + foo(); // Debugger is currently here
   return t;
}

Then:

• Step into will proceed into the foo call, and the current line will then become the return "hi"; line within foo.
• Step over will ignore the fact that another method is being invoked, and will proceed to the return t; line (which lets you quickly see what t is evaluated as).
• Step out will finish the execution of the rest of the bar method, and control will return to the last line of the main method.

Answer 2

• step into -> go into the subroutine and wait for next action
• step over -> jump over the subroutine without waiting again
• step out -> if you are in the subroutine, you will leave it without waiting again

Answer 3

• Step Into will cause the debugger to go into the next function call and break there.

• Step Over will tell the debugger to execute the next function and break afterwards.

• Step Out will tell the debugger to finish the current function and break after it.

Answer 4

The short version is, step into takes you inside of the function being called on the current line (assuming one is being called), step out takes you back to where you were when you decided to step into a function, and step over just moves to the next line of code. For example:

window.someFunction = function() {
    var x = 10;    //step over to move to the next line
                   //step out to return to the line after where 'someFunction()' was called
                   //step into not available
    var y = 20;
    return x * y;
};

//set breakpoint here
var x = 7;   //step over to execute this line and move to the 
             //next (step into and step out not available)
x += someFunction();  //step over to move to the next line
                      //step into to move to someFunction() (above)
                      //step out not available
alert(x);    //step over to display the alert
             //step out and (probably) step into not available