Debugging a Phonegap App

Masahiro Tanaka | Monaca & Onsen UI

Who am I?

Founder & CEO of Monaca, Tokyo Japan

Our works: Monaca and Onsen UI

Link to Facebook / Twitter @massie


  • Learn about debugging options.
  • Learn about debugging tools.
  • Know about live reloading tools.

Debugging and Testing

Testing: to find problems.

Debugging: to fix problems.

Debugging Difficulties

  • Use PC browser to debug first? It may not work on mobile phones, or vice versa.

  • Cross platform development? Need to install and check on all target devices.

  • Limited WebView debugging capability? Want something like the Chrome Dev Tool?

PG Debugging Solutions

No swiss army knife, but you can combine them together.

OS Console.log DOM Inspect JS Debug Pitfalls
W/o tools iOS, Android
Weinre iOS, Android Limited No breakpoints
Remote Debug
iOS iOS >= 6
Remote Debug
Android Android >= 4.4

console.log Debugging

  • Android: logcat output (tag: CordovaLog).
  • iOS: NSLog output.
// Subset of console functions
console.debug("I'm an debug message");{key: "I'm an info message"}); // [object Object]
console.log("I'm a log message");
console.warn("Warning!", "Secondary message"); // Only first argument
console.error(["It's error!!", "Second error"]); // It's error!!,Second error

Capturing JS Exceptions

// for Android
WebView myWebView = (WebView) findViewById(;
myWebView.setWebChromeClient(new WebChromeClient() {
  public boolean onConsoleMessage(ConsoleMessage cm) {
    Log.d("Appname", cm.message() + " line=" + cm.lineNumber() + " sourceId=" + cm.sourceId() );
    return true;
// for iOS
- (void)webView:(WebView *)webView  exceptionWasRaised:(WebScriptCallFrame *)frame
    forWebFrame:(WebFrame *)webFrame {
    if (kExceptionWasRaised)
        NSLog(@"sourceId=%d line=%d function=%@ caller=%@ exception=%@", 
              sid, lineno, [self functionNameForFrame:frame], [self callerForFrame:frame], [self exceptionForFrame:frame]);

Weinre Remote Debugger

Setup your own server from npm repository.

# npm -g install weinre
$ weinre --httpPort 8888 --boundHost

Or use PhoneGap hosted service:
and just follow the instructions!

Safari Remote Inspector

Requirements: Debug or simulator built app, iOS 6, and Mac Safari

  1. Enable Web Inspector under Safari Advanced settings.
  2. Open Safari, enable develop menu.
  3. Plug your device via USB connection.

Chrome Remote Debug

Requirements: Android 4.4 (KitKat), Chrome browser

  1. Set debuggable flag to "true" (by default)
  2. Open Chrome and navigate to chrome://inspect.
  3. When the pairing is done, you should see your device.


Enables JavaScript debugging for older Android devices.



multi-device debugging!!

App Harness alpha

Cordova, on-going project.
Will be integrated in PhoneGap SDK.

Monaca Debugger

Part of Monaca development cloud.

Monaca PhoneGap IDE

Thank You!


GAME & APPS Devs SF Meetup / Feb. 4, 2014