Tracing the JavaScript Code using the debug buttons

The step over button starts execution from function call and every time you press the step over button it executes the code in the function and moves to the next function call.

The step into button starts execution from the function call and pauses at each line in the function until the function ends.

The step out button continues the execution of the script till the end of last line of the current function.

Breakpoints

We can also put breakpoints in our script by using “debugger” at the line where we want to put a breakpoint. To remove all the breakpoints we have a button in the top right corner.

Call Stack

You can watch the call stack for nested functions. Initially the call stack will be empty, when the execution starts the call stack holds the current function inside it when the function is in execution and pops it out once after the execution completes.

Scope

Watch the local scope while execution. It holds the values of the variables of the function while the script is in execution.

By using breakpoints and debugger statements we can pause the script for watching the variables and trace the code where the execution is going wrong and then reproduce the error to make the code work as we intend.

Debugging is the process of identifying and correcting bugs in a computer program or software application. The errors or issues that cause the programs to misbehave are known as bugs. These bugs are the expected errors within the program or the application. The term “bug” means “technical error,” given by Thomas Edison when describing his little difficulties and faults in his experiments.

Debugging is an integral part of the software development lifecycle, which comes under the software testing phase. The process of debugging starts when there is a bug or issue found in the code and if the problem can be reproduced.