Debugging JavaScript in Google Chrome




Introduction: 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.

Teacher Notes

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

    First, download the given file which contains a small example website. Rename the file to "exampleJavaScript.html" and open the 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

      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.

      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

      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.

      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.

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

      Be the First to Share


        • Trash to Treasure Contest

          Trash to Treasure Contest
        • Raspberry Pi Contest 2020

          Raspberry Pi Contest 2020
        • Wearables Contest

          Wearables Contest

        4 Discussions


        3 years ago

        Thanks for the tutorial. Javascript just stops working in case of any syntax errors and we will need to spend significant time to get it fixed. Useful information


        3 years ago

        I would still prefer FireBug on Mozilla Firefox (NOT on Chrome). Its more intuitive and more robust i would say more user friendly too.


        3 years ago

        This is super helpful because I had a similar virus in my computer and I spent at least a week researching how to get rid of it. I will have to remember this tutorial if it ever comes up again :-)


        3 years ago

        There's nothing worse than spending three hours to find a missing semicolon!!