Debugging Cordova

I had to revisit an old project today that was built on Cordova and App Framework.

It was like hell reacquainting myself with the application and I’m still not through, but I thought I’d post a few quick references that helped me along the way.

App Cache

Since our App uses HTML5 Application Cache and one of our greatest assets in Cordova development is Google Chrome and its robust set of dev tools, I needed a way to clear the app cache in Google Chrome. Which I found is possble by navigating your browser to chrome://appcache-internals/

Android-Chrome Dev Tools

I also found out with USB Debugging enabled you can remotely debug WebViews on android, but it might require additional code:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

For debuggable mode only use the following:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE)) {
        WebView.setWebContentsDebuggingEnabled(true);
    }
}

Then you can open chrome to chrome://inspect and select the device from a list and poke around using Chrome dev tools to mess with JavaScript or CSS on your device on the fly. Another advantage–this one’s my favorite–you can refresh the embedded WebView with ⌘ + R (or I guess Ctrl-R for windows) from the chrome inspector.