Debugging JavaScript Basics
Reading Time:
Reading Time:
var globalVariable = 'variable in global scope';
// global age
var age = 34;
function testFunction() {
var localVar = 'inside functions scope';
// functions local age variable
var age = 22;
for (var year = 2014; year < 2020; year++) {
++age;
}
globalVariable = 'Changed inside the function scope';
};
testFunction();
In the above example code, we have two Global and Local Scope variables. The age
variable inside the function is incremented using a for
loop to increase the value of it based on the year
variable increment. The browser Developer Tools can be used to debug this code and determine the value of these variables at run-time and analyze how they are changed.
To do this we first need to move the JavaScript code to a separate file, then create a HTML file and include the JavaScript file.
<!DOCTYPE HTML>
<HTML>
<head>
<title>Debugging JavaScript</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>Debugging JavaScript</h2>
<script type="text/javascript" src="debuggingJs.js"></script>
</body>
</HTML>
Open the HTML file that we created in Google Chrome browser. Press the F12 keyboard shortcut to bring the Chrome Developer Tools. In that select the Source tab and select the your JavaScript file from the left column.
To inspect the JavaScript code we will be using something called the Breakpoints. Breakpoints can be used to inspect the values inside a scope at a particular time. The program execution pauses at points were we have inserted the breakpoints and the column at the right displays the Call Stack, Scope Variables and other information’s.
To insert a breakpoint click on the line number of where you want the breakpoint to be inserted. The Breakpoints inserted will be show an the right side column under the Breakpoints menu.
The execution paused using the breakpoint can be resumed using the controls provided.
I have inserted breakpoints in specific locations where i want to view the values of the Local Scope variables. The Global Scope Variables are also show under the Global menu under Scope.
Note: In JavaScript initially all the variables are declared with undefined as their value, then it is defined with the users given values according to the program execution. You can see this while debugging.
Once the breakpoints have been inserted, refresh the browser page. The browser will stop the program execution at the first breakpoint you have inserted. In the column to the right you can view the Local and Global Variables under the Scope menu. You can use the resume and pause button to continue the execution.
The image below shows how the value of age
and year
is incrementing with each execution of the for
loop.
The Global variables age, globalVariable
can be seen inside the Global list under the Scope menu. The testFunction
has variables age
and year
inside its own scope. We can view how the variables changes with execution of the for loop in the column at the right as shown below. By this way you can analyze the values of the variables in the JavaScript code.
By using this technique inspect the JavaScript code and understand how the code is being executed. You can solve bugs, understand code and various other things can be achieved by learning this.