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.
Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.
Step 1: Open the Provided File in Chrome
Step 2: Start the Chrome Developer Tools
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.
Step 3: Open the File in the Debugger
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.
Step 4: Set a Breakpoint
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.
Step 5: Debugger Actions
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.
Step 6: Step Over Next Function Call
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.
Step 7: Jump Into Function
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.
Step 8: Watch Expressions
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.
Step 9: Scope
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.
Step 10: Call Stack
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.