Debugging JavaScript Basics
Reading Time:
Debugging JavaScript is one of the essential skills all the front-end developers should have. JavaScript is a language in which it is difficult to predict the value of a variable or an object at a given time because of the prototypical inheritance and various other factors. But with the help of the developer tools provided in various browsers (Mozilla Firefox, Google Chrome) we can debug i.e. analyse the values of variables at runtime.
By using the browser debug tools, we can view the values of the variable and object in local and global scope in realtime.
Example:
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>Debugging JavaScript
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.
Breakpoints
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.
Breakpoints
Breakpoint Control
The execution paused using the breakpoint can be resumed using the controls provided.
Breakpoints Controls
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.
Analyzing the change of variable value in 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.
Global Variables can be seen under the Global List
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.
