2.8 - Debugging¶

Google Chrome Development Tools¶

To open Google Chrome’s development tools, do one of the following:

• From the main drop-down menu select “More tools” and then “Developer Tools”.
• From the View menu –> Developer –> Developer Tools
• Right-click on any element in a web page and select “Inspect”
• Shortcut command: (Windows) CRTL + SHIFT + I, (Mac) CMD + OPT + I

Covering all of the tools in Google Chrome is beyond the scope of this textbook, but you need to become very adept at performing the following tasks:

• Setting break points in Javascript code and executing your code to the break point.
• Stepping through your code one statement at a time.
• Examining variables and their values.
• Using the run-time stack to trace code execution.
• Modifying code in your browser to make a program work successfully before modifying your source code.
• Using the console window for experimentation.

To learn the basics of the developer tools and an overview of what is possible, please watch this 9 minute video tutorial.

To learn how to use the JavaScript Debugger in the development tools, please watch this 11 minute video tutorial.

Debugging principles¶

A WebGL 3D graphics program is a complex combination of logic and data. You will need strong debugging skills to make WebGL programs work properly. The following debugging principles will be key to your success.

• Whenever possible, start with a working program and modify it in small increments.
  If you add 100 lines of code and your software stops working, you have 100 places to look for your problem. If you add four lines of code and your software stops working, you have four places to look. In which situation will you find your error more quickly?
  
  
• Learn how to efficiently use your browser’s debugger.
  If your code stops working, place a breakpoint at the first line of your new code and reload your web page. When execution halts at the breakpoint, step through your code one line at a time. Make sure that every variable has an accurate value before executing the next line. If a variable has an incorrect value, you can change its value in the console window before executing the next line. This allows you to continue debugging after you find your first error.
  
  
• Use the Javascript console for experimenting.
  Don’t change your code, re-load the web page, and “hope for the best.” When you have a statement that does not produce the desired value for a variable, use the Javascript console to experiment with various statements until you find a new statement that works. Then modify your code with your proven correction. Now you can re-load your web page and perform a final validation. You will be amazed at how much time this will save you.

Experiment¶

Please open the developer tools on a web page and experiment.

If there are specific features in the developer tools that you want to learn about, there is probably a video tutorial that explains it. So, as time allows, explore the tools.

Glossary¶

debugging

the modification of program code to remove errors.

break point

a location in program code where execution will halt. The code can be executed from this point one statement at a time.

run-time stack

the sequence of function calls that were made to get to the current execution point.

JavaScript console

the location where messages are displayed and interactive statements can be executed.

Self-Assessments¶