Before, dwelling into the details of debugging techniques, let us assume we have an a webpage with following script.
function DisplayResult(input1, input2)
document.write("The result is "+AddNumbers(input1, input2))
function AddNumbers(num1, num2)
var result = num1 + num2;
It can be seen that the file contains two functions: DisplayResult function which is called from the webpage and the AddNumbers function which takes two parameters, add them and returns the result of the addition. AddNumbers function is being called from DisplayResult function.
Now, let us see how we can debug a JavsScript program.
There are two ways to launch Google chrome developer tools.
First is by going to the top-right corner of the browser window and clicking “Customize and control Google Chrome” button. This opens a drop-down list. Select “More tools” option from the list and then select “Developer tools” from the drop-down list which appears. Have a look at the following figure:
The other way to launch Developer tools in chrome is by simply right clicking anywhere on the page and click “Inspect” from the options that populate.
For this tutorial we opened the webpage that we created at the start of the tutorial and then opened developer tools. The following window appears at the bottom of the screen.
You can see that there are several options. If you click “Sources” from the options, you can see your webpage and all the pages that it references. In our case both the “index.html” which is our only page is displayed along with the script that we are using. Click “script.js” file and you will see its contents.
function AddNumbers(num1, num2)
var result = num1 + number2;
Note, in we have changed num2 to number2 but this variable doesn’t exit. If you again open the webpage or refresh it via “Ctrl+R” and open the developer tools, you will see an error. Have a look at the following figure:
If you look at the top right of the above figure, you shall see an error icon with number 1. These shows there are 1 error in the program. If you look at the console at the bottom, the error is shown. On extreme right, the file which contains the error and the line number of the error is also shown which is “script.js” file and line number 8. If you click this file, the contents of the file will be displayed. You can click the error icon to see the detail of the error as shown in the following figure:
Break points help stop execution of your code at a certain point. Developers can view state of different variable at a certain point of execution with the help of these break points. For instance, if you want to see what variables are passed to “DisplayResult” function you can add break point at the start of that function. To add break point simply clicks on the left grey area of the line at which you want your program to stop execution. The area will turn blue as shown in the following figure:
Now if you refresh the page using “Ctrl + R”, the page will stop its execution at the break point which you set. This is shown in following figure:
Here you can see the contents of variables input1 and input2. You can use F10 key to step over the code, F11 to step into the code i.e. other functions, Shift + F11 to step out of code and F8 to continue executing the code.
Conditional break points can also be added which only hits if a certain condition is met. To do so, right click on the grey area on the left side of the line where you want to add break point and select, “Add conditional breakpoint” option. A text field will appear. Here the condition can be added. For instance, you can add that if the value of the input1 is 20, only then this break point should be hit.
Chrome developer tools also lets developer watch the behavior of a variable using “Add Watch” feature. To add a feature to watch, simple Right click the variable and select “Add to watch” option that appears at the top of the list. Have a look at the following figure:
Once you add a variable to the watch it appears inside a window in the developer tools. You can do whatever you want with the variable. For instance, number ten has been added to the “num2” variable which is under the watch. The developer tools have evaluated the expression and the result has been displayed. Consider following figure: