Debugging in PhoneGap
Clone this wiki locally
Debugging in PhoneGap
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.
Picking a Desktop Browser
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 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|
Mimicking the Mobile Environment
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.
Debugging your Application
- 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.
Remote Web Inspector
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 hurdle with testing on a mobile device is that you will not have access to WebInspector. This is where a remote web inspector steps in.
Safari Remote Debugging
If you are doing iOS PhoneGap debugging and 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!
Chrome Remote Debugging
If you are doing Android PhoneGap debugging and have an Android 4.4 device and Chrome 30+, you can use the new WebView Debugging tools added in Android 4.4. If you are using Cordova 3.3 or higher, this is already supported, and only requires the Debuggable flag in your AndroidManifest.xml. For Cordova 3.2, you will need to enable WebView debugging using some code, or by use of a plugin.
A complete iOS and Android debugging experience for PhoneGap and Cordova apps, debug on both Windows and Mac platforms. Automated plug-and-go debugging with no requirement to build debug support into your app. GapDebug integrated versions of the Safari Webkit Inspector for iOS debugging and Chrome Dev Tools for Android debugging. GapDebug is maintained by Genuitec and is a always free tool.
WebKit's Remote Web Inspector
WebKit has the ability to connect it's WebInspector to remote WebKit browsers, although few mobile platform support this feature.
jsHybugger is a (commercially available) tool that lets you debug PhoneGap apps on Android using Chrome DevTools. A plugin for PhoneGap 3.x and library for PhoneGap 2.x is available. Install jsHybugger from GitHub with the following command. This adds the plugin to your PhoneGap 3.x application.
phonegap local plugin add https://github.com/jsHybugger/cordova-plugin-jshybugger.git
After installing and starting the app on the device, you can use Chrome DevTools on a desktop machine to debug the app.
phonegap create <name-of-project> cd <name-of-project> phonegap local plugin add https://github.com/jsHybugger/cordova-plugin-jshybugger.git phonegap build android phonegap run android --device
See the jsHybugger home page for details.
Additional Debugging Resources
When all else fails, you can always use
alert('...'); to mobile web application. I know it's not pretty, but it can help when you're in a jam.
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.