Debugging with Watchers

When trying to debug a program, it's useful to keep track of the current value of a variable or sprite property as the program runs. Sometimes you can use console.log() to quickly report the value of a variable, but that's not so useful when you want to track multiple variables, or variables that change often during your program.

A watcher is a debugging tool that, as its name implies, watches your variables while the program runs, making it easier to see what they are doing.

Using Watchers

Watchers are located in the Watch section of the debugging window, you may need to uncollapse this window to see it.

  1. Here we created a variable watch_me with an initial value of 0. You can also use watchers to track sprite properties.
  2. Every time the draw loop runs we're incrementing watch_me by 1. This will cause it to change 30 times a second.
  3. This is the watcher pane. At the top are all of the currently added watchers, and below is an area to add new watchers.
  4. As the program runs, this section continually updates to show the current value of the watched variable watch_me.

Adding a Variable to Watch

You can add watchers for any variable or object property by typing the name of a variable in the box and clicking the blue "add" button. If your program isn't running or the variable hasn't yet been assigned a value, the watcher will report a value of undefined. This isn't an error, it just means that the variable hasn't yet been assigned a value.

Found a bug in the documentation? Let us know at documentation@code.org