Debugging in PhoneGap - amirudin/phonegap GitHub Wiki
Debugging support for your PhoneGap applications is not as well-developed as for native apps or for pure web apps. The main hurdle is that the browser to be debugged is on your mobile device or simulator. This makes it difficult to synchronize breakpoints or retrieve stack traces. Nonetheless, there is still a lot that you can do.
The desktop browser is a powerful tool for mobile web development. Surprisingly, the majority of your mobile development can be previewed and debugged in your desktop browser. The main pitfalls of using a desktop browser compared to mobile browser are rendering accuracy, JavaScript performance, and API availability. However, these pitfalls can be overcame with some Additional Tools
When picking a desktop browser, you must consider your targeted mobile platform. Each mobile platform uses a different browser and while you cannot find exact same browser on the desktop, you can match the browser engines. Below is a table that lists desktops browsers for each platform:
| Mobile Platform | Mobile Browser Engine | Compatible Desktop Browsers |
|---|---|---|
| Android | WebKit | Apple Safari, Google Chrome |
| Bada | WebKit | Apple Safari, Google Chrome |
| BlackBerry 5.0 | Proprietary | None |
| BlackBerry 6.0+ | WebKit | Apple Safari, Google Chrome |
| iOS | WebKit | Apple Safari, Google Chrome |
| webOS | WebKit | Apple Safari, Google Chrome |
| Windows Phone | Internet Explorer | Internet Explorer |
This is fairly straight-forward. Just resize your desktop browser window to be roughly the size of a mobile viewport.
In Google Chrome, you can open the WebInspector Settings (gear in the bottom right of WebInspector) to enable Touch Event emulation.
With the desktop browser, you can leverage the browser's debugging tools. In a WebKit browser, you can open WebInspector to inspect the DOM and debug JavaScript. Most other browsers have an equivalent debugging tool.
- PhoneGap Emulator uses Ripple to emulate the PhoneGap API.
- Ripple Emulator emulates the PhoneGap API.
- ScreenQueri.es to preview exact device screen sizes.
- thumbs.js is a TouchEvent polyfill.
- PhoneGap Desktop is a mocking library for the PhoneGap API.
After you've developed the first stage of your application with your desktop browser, you will want to test it on a mobile device. The main hurtle with testing on a mobile device is that you will not have access to WebInspector. This is where a remote web inspector steps in.
If you are doing iOS PhoneGap debugging have the Safari Develop Menu enabled, you can access the currently active session through the built-in Safari Web Inspector. To activate, go to Develop -> (iPad || iPhone) Simulator (normally, the third menu item) and click the active session you want to connect to. Voila!
Weinre is a remote WebInspector that will debug any browser remotely. It is not quite a full-fledged debugger, but gives you a live view of the DOM and access to the JavaScript console. Unfortunately, no breakpoints or stack traces are available, but the JavaScript console can lend clues about errors.
You can run Weinre locally or use debug.phonegap.com.
WebKit has the ability to connect it's WebInspector to remote WebKit browsers, although few mobile platform support this feature.
When all else fails, you can always use console.log('...'); or alert('...'); to mobile web application. I know it's not pretty, but it can help when you're in a jam.
Advanced log message handling can be found on Exception Log Handling.
On Android, all console.log('...'); messages will appear as printouts in the command-line tool logcat, which is bundled with the Android SDK and integrated into the Android Eclipse plugin.
On BlackBerry, all console.log('...'); are printed to the BlackBerry's Event Log. The Event Log can be accessed by pressing ALT + LGLG.
On iOS, all console.log('...'); are output to the Xcode Debug Area console.