Professional HTML5 Mobile Game Development

Mobile Debugging

Debugging on the desktop is okay, but because this book is about mobile games, there’s no substitution for debugging on real hardware. Unfortunately, with the exception of Chrome for Android, there’s no built-in way to debug your page.

If you are on Android with version 4.0 (Ice Cream Sandwich) or newer and have Chrome installed on your device and the Android SDK installed on your desktop, you can enable Remote Debugging as described in the Google documentation at http://code.google.com/chrome/mobile/docs/debugging.html.

For iOS, things aren’t quite as convenient. For simply watching for JavaScript errors, you can turn on the debug console. This is switched on by going to Settings > Safari > Advanced. Any page you load now shows the Safari Debug console at the top. If there are errors, they will be noted, and you can click the tab to see some more details. This is most likely not quite enough when you want to track down some hard-to-debug, platform-specific issue. The good news is there is a tool called Weinre, which is part of Apache’s cordova project that adds basic remote-debugging capability: https://github.com/apache/incubator-cordova-weinre.

The way Weinre works is by running a Java-based server on a computer that a mobile device can connect to by including the appropriate script tag. When connected, you can access a limited subset of tabs that behave similarly to Developer Tools (see Figure 7-17).

Figure 7-17: The Weinre remote inspector.

Because Weinre ...