O'Reilly logo

Professional HTML5 Mobile Game Development by Pascal Rettig

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Debugging JavaScript

Because HTML5 games are heavy on JavaScript, you’ll often want to inspect your running game when stuff goes wrong or behaves unexpectedly. Luckily, Developer Tools provides a debugging environment that is second to none, allowing you to look at the objects, functions, and values as well as stop your game’s execution at a specific point and look at the exact state of the game.

Examining the Console Tab

Your first stop when something goes wrong should be the Console tab. It alerts you to any JavaScript errors that have occurred while running your game. Errors are highlighted in red, and you get a filename and line number where the error occurred (see Figure 7-8).

Figure 7-8: A JavaScript error in the console.

c07f008.tif

Clicking the filename on the right takes you to the file where the problem occurred and with the offending line highlighted (see Figure 7-9). You can click the little arrow to the left of the error to open the callback, which shows you all the nested function calls needed to get to the current line.

Figure 7-9: A JavaScript error at the spot of the error.

c07f009.tif

In addition to highlighting errors, you can also use the console.log method to log messages and data to the console. If you log a string it shows up as a string in the console with a matching line number ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required