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

Agenda

• 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.

console.log Debugging

• Android: logcat output (tag: CordovaLog).
• iOS: NSLog output.

// Subset of console functions
console.debug("I'm an debug message");
console.info({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(R.id.webview);
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
       sourceId:(int)sid
           line:(int)lineno
    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 192.168.xxx.xxx

Or use PhoneGap hosted service: debug.phonegap.com
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.

jsHybugger

Enables JavaScript debugging for older Android devices.

Live-reloading!

&

multi-device debugging!!

App Harness alpha

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

https://github.com/apache/cordova-app-harness

Monaca Debugger

Part of Monaca development cloud.

Monaca PhoneGap IDE

Thank You!

Slide: http://monaca.github.io/slides/2014-pg-debug/