Debugging JavaScript in Google Chrome

Often when creating websites, developers make mistakes. Sometimes it is difficult to find exactly where the mistake occurs. To solve this problem, Google offers a debugger built into Google Chrome which allows a developer to run the code line by line, view the contents of variables as the code is executed, and view the contents of the call stack. This Instructable is going to show you how to use this debugger.

You will need Google Chrome and about 15 minutes to do this Instructable.

First, download the given file which contains a small example website. Rename the file to "exampleJavaScript.html" and open the file in Chrome.

Next, open the developer tools in Chrome. To do this, open the Hamburger Menu, open the more tools submenu and click Developer Tools. This should open a panel in Chrome. It contains a number of useful tools for developers. In this Instructable, I will have the panel attached to the bottom of the screen. To attach it to the bottom yourself, click the three-dotted menu by the close button and choose the horizontal rectangles.

The tool we are interested in called sources. Click on the tab called sources to open the list of files in the website. Because the page is so simple, there should only be one file. Click it to open in in the debugger.

When the browser opens a webpage, it executes the JavaScript automatically, line by line. A breakpoint is a line where we want the browser to break out of its automatic execution and give control to the user to choose the next action.

Click on the number 35 to the left of the file contents. It should highlight the number blue and, on the right, a breakpoint should be added.

Refresh the page to run the code up to the breakpoint. At this point, the browser has run the code up to that line. In the top right of the Developer Tools, there are a number of buttons that let us choose what the browser should do at this point. If at any point you choose an action you did not intend, refreshing the page will go back to the first breakpoint.

• The blue play button will simply continue code execution until the code is fully executed or another breakpoint is hit.
• The dot with the arrow will execute the current line and pause at the next line
• The down arrow will step into the next function call on the current line, jumping to its first line. If there are no function calls, it will execute the current line and pause at the next line.
• The up arrow will execute code will finish the execution of the current function, and jump to the function that called the current function. In our example, because this is the top function, it will just run to the end and stop the debugger.

First, click the second button: "Step Over Next Function Call". The next line should be highlighted. Although we cannot see it, "sumNum" should contain the results of the function call.

Refresh the page to go back to the breakpoint. This time, click the third button: "Jump into function". This should cause the browser to call the "op" function and give us control on the first line.

One of the features of the Chrome Debugger is the Watch panel. This is on the top of the right section. If you add a watch expression, you can add any JavaScript code and it will output its result. This allows the developer to see what this code would evaluate to at the current line in the program.

You can add a watch expression by pressing the plus in the Watch panel. Add the expressions "list" and "num" to the watch list. The variable "list" is an array of size 5 and if you expand the element by clicking the right arrow, you can see the contents of the array. The variable "num" has not been defined yet, so it is not available.

Another useful feature of the Chrome Debugger is the scope panel. This is below the watch panel. The global section shows all the variables defined in the page. The local section show all the variables defined in the current function up to this point.

Press the step into function button until the last line of the "sum" function containing the curly brace is reached. This should take about 20 presses. While doing that, notice the changes to the variables in the watch expressions and the local scope.

The last feature of the Chrome Debugger this Instructable will deal with is the call stack panel. It is between the watch panel and scope panel. The call stack is the list of functions that are being called right now. At this point in the execution of the page, the browser has called the "op" function and while calling that, has called the "sum" function. If you select a function in the call stack, you can see the watch expressions and local scope of the function at the time it called the next function.

With that, you know how to debug any JavaScript function you encounter.