Debugging an HTML5 game

Because debugging is nearly always a part of game development, let's look some basic ways to debug your HTML5 game as you develop it. If you are an experience developer, you can skip this topic.

You can use tools and basic defensive programming to help debug your game:

• Windows Internet Explorer's F12 Developer Tools.
• Basic console commands.
• Simple defensive programming techniques.

F12 Tools

When developing a JavaScript app, such as our Boulder Bop game, make sure a debugger window is open. To open the F12 Developer tools in Internet Explorer:

1. Press the F12 key.
2. Click the Script tab (second row).
3. Click the Console tab (on the right), if necessary.
4. Press the F5 key to refresh the page you're working on.

If there are any detectable errors (including syntax errors), you'll see them in the Console window with the line number of the error. For more info, see How to use F12 Developer Tools to Debug your Webpages.

Console commands

When developing, it can be helpful to add a console.log statement in all your functions to confirm that you're programming what you want to happen. This simple technique can be seen in HTML5 game skeleton code for Boulder Bop. You can take this a step further by declaring a global DEBUG "constant" to easily turn on and off your debugging output. For example, in Boulder Bop, we include this code within the update method:

if (DEBUG) { 
  console.log("length: " + _objects.length + 
              ", type: " + _objects[i].type + 
              ", id: " + _objects[i].core.id);
}

While developing Boulder Bop, this statement confirmed that game objects were created and destroyed when expected.

Defensive programming

In addition to console.log, you can use console.assert to find problems. If you believe that something is true at a given point, that state so; as in console.assert((x == 1), "assert message: x != 1"). For more info, see JavaScript Console commands.

Take the time to add defensive code. As another example, consider adding default clauses (if not needed) to switch statements:

var setState = function(stateItem, value) { // Public.
  switch (stateItem) {
    case "score":
      spec.score = value;
      _scoreBox.textContent = "Score: " + spec.score;
      break;
    case "level":
      spec.level = value;
      _levelBox.textContent = "Level: " + spec.level;
      break;
    case "paused":
      spec.paused = value; // A Boolean value.
      break;
    case "over":
      spec.over = value; // A Boolean value indicating if the game is over or not.
      break;
    case "sound":
      spec.sound = value; // A Boolean value indicating if the game should have sound or not.
      break;
    default:
      console.log("Error in switch of setState()");
  } // switch
}; // Game.setState()

that.setState = setState;

Simple techniques such as these can help to avoid significant debugging time later on.

Note  When debugging code that uses the functional inheritance pattern, it's sometimes easy to forget that the object under consideration has inherited a number of methods and properties that may need to be redefined or even disabled by specifying a NOP method.

 

Related topics

Introduction to F12 Developer Tools

Debugging JavaScript using F12 Developer tools

How to use F12 Developer Tools to Debug your Webpages

JavaScript Console commands