2.8 - Debugging¶

Your workflow for developing WebGL programs will look like this:

// Use an IDE to create your program files.

while (program_is_not_finished) {
  // Load your web page into your browser using localhost to test.

  // Use the browser's "development tools" to debug your program, including
  // modifying it to make it work.

  // Use your IDE to modify your source files.
}

All web browsers include “development tools” that allow a web designer to analyze their web sites and to fix problems. We will only discuss how to use the Google Chrome development tools in these tutorials.

Google Chrome Development Tools¶

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

From the settings menu select “More tools” and then “Developer Tools”.
From the View menu –> Developer –> Developer Tools
Shortcut command: CRTL + SHIFT + I

We do not have time to cover all of the tools, but you need need to become very adept at using the following tools:

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 system that will require strong debugging skills to make it accurate and robust. 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 something 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.

Next Section - 3.1 - Introduction - Describing Virtual Worlds