PhoneGap – Debugging Your Android Application

In this blog post we will see how to debug your android application.

There are two primary ways to debug your android app
1. Chrome Inspect Devices
2. Android Device Monitor

Chrome Inspect Devices

Chrome Browser Provides a way easy way to debug android apps. Open your chrome browser and type “chrome://inspect/” in the url bar. Make sure that your device is connected via a USB cable and “USB Debugging” in enabled in the device.
You should see your device show up in the “inspect” tab and you click on inspect link next to your device to see any console.log statements, javascript errors etc. More details of this here
This basically allows you to easily see javascript errors, console messages, debug html/css, memory leaks, profile applications, etc through chrome. This is very powerful for debugging android apps.

Android Device Monitor

Android Device Monitor comes packages with android sdk which you would have installed previously. To run this, go to tools/ folder inside your android sdk “/var/android-sdk-linux/tools”. Then run the following

chmod +x monitor
./monitor

If you are on windows, directly open the monitor.exe file.
In the device monitor you can see you entire device log, exceptions, messages everything. There is a tab below “LogCat” where you will see all device related message. You will see all messages here including android device exceptions which are not visible chrome inspect device. This is usefully to debug application crashes or any other such problems. Be sure to create filters using the “+” sign in logcat tab, so that you see messages only for your application.

Tips & Tricks

To debug phonegap application, specifically plugins its important to know where all your plugin files go when you install a plugin. This helps a lot of in solving compilation errors etc. So lets look at the important folders inside “platforms/android”

platforms/android/src This folder contains all the source files on your plugins and core phonegap library. This will contain all .java files of your plugins, even the main phonegap activity file is present here.
If your application package name is com.excellence.hello then your main activity file would be present in
“platforms/android/src/com.excellence/hello/CordovaApp.java”
To debug if a plugin is installed properly, check if the plugin files are present in this folder or not.

platforms/android/assets/www This is the folder will your HTML/CSS/JS files go after compilation. Even the javascript files of your plugins are located here. Open the “plugins” folder in this and you will see a list of your installed plugins here. So this is another place to check if your phonegap plugin was installed properly or not.

platforms/android/libs Any shared library of a plugin will be present in this folder

platfroms/android/ant-build This folder contains your unsigned debug apk of your application

platfroms/android/res This folder contains your splash screen and app icon images, and any other images used by your plugins

platforms/android/AndroidManitest.xml : This is location of the main configuration file for your android app.