How to debug Android PhoneGap Apps locally on windows

By SuperUser Account on 12/11/2013

Be sure to read my previous post  first since this post builds on “option 1″ which is about building a PhoneGap app for Android locally on your Windows computer.  It is not about using “option 2″ which is building PhoneGap apps with the PhoneGap build server.  I’ll blog on option 2 in my next post.

PhoneGap is turning out to be pretty cool.   I built my first Hello World app and like most hacks do, went to work hot-rodding it.  My hot-rod Hello World app is found here:https://github.com/briankj/phonegap_hello_world  on github if you want to check it out.  It handles the deviceonready event, displays properties of the device, and interacts with camera, gps, compass and records and plays audio.  As promised, I used the PhoneGap / Cordova API to build the app and test it on my Galaxy S4 and my iPad.   In the process, I botched the Javascript a few times and the app just sat there doing nothing when I touched buttons on the UI.  The bugs caused error conditions, but my error handling was pretty sparse for this demo app and so consequently there was no user-friendly information passed to the screen describing the offending errors, like you normally get with compiled frameworks like ASP.NET and others.  So what next I asked?  I’m no Javascript expert so I started Googling around to get debugging plugged into my PhoneGap development process and found it is not straight-forward.  I found several approaches and tried a few.  For example, I tried the PhoneGap Weinre server available a http://debug.phonegap.com, but I did not have any luck there.   The method that worked best for me was to set up my own local Weinre server on my Windows laptop.  Like all things PhoneGap it took me a while to get it working properly.  The Weinre docs were pretty much spot-on so you can start by reading those on the website.  The biggest issue I struggled with was poking holes through my laptop’s firewall (I’m running Mcgafee).  Once I added rules to the firewall to allow inbound and outbound traffic on port 8081 I managed to get it working.  I may not know all the tricks to debugging effectively yet so at this point I’d say debugging my hot-rodded Android Hello World app is OK, but not great.  It’s not as good as using Visual Studio to debug C# code or using Flash Builder to debug Actionscript for example.  I’d say it’s more like the debugging I did back in the day writing COBOL using “display” statements or like using “echo” statements to debug UNIX scripts.  No breakpoints and stepping through the code like we all prefer when using Weinre.  Still, I got it done with “console.log” statements in my Javascript code.  As I become more experienced with Javascript and PhoneGap I expect the debugging process will improve quite a bit, but for now it is still pretty slow.  I’ll describe how I’m doing it below and if anyone can give me some pointers to improve, I’d really appreciate it.

First, I set up Weinre by simply following the installation instructions on the website:

1. open a command prompt and run this:

npm -g install weinre

2.  I started the Weinre server on my laptop.  This was not very obvious since the install did not put Weinre in the path for me.  I hunted around and found it in here: “C:\Users\brian\AppData\Roaming\npm\weinre” .  There are a number of command line options documented on the Weinre website, but I only needed to include two options.  Here’s the content of my debug.bat script I set up to properly start the Weinre server on my laptop: “C:\Users\brian\AppData\Roaming\npm\weinre –boundHost 192.168.1.103 –httpPort 8081″.  Notice the IP address and the port are hard coded.    I found my IP by running “ipconfig”.  Note that this IP often changes when my laptop re-connects to my wireless router and I just run ipconfig again and edit my debug.bat file.  I’m sure there’s a better way, but for now this works.  I ran my Weinre on port 8081, but you can pick whatever port works best.

3. The debug.bat described above got the server process running, but when I ran my PhoneGap app the Weinre server did not find my app.  That’s why I suggest poking holes in your firewall at this step.  Opened the Firewall Administration interface (Mcgafee on my laptop) and created inbound and outbound rules to allow TCPIP traffic on port 8081.

4.  Next, I put this line into the header section of the index.html file of the PhoneGap app:

<script src=”http://192.168.1.103:8081/target/target-script-min.js#anonymous”></script&gt;

Notice the hard coded IP and port matches the IP and port of my debug.bat file.

5.  Before running the app on your phone, open a browser window and navigate to your Weinre server.  Be sure you execute debug.bat first.  I pasted this into my browser address box: http://192.168.1.103:8081.  You should see the home page of your Weinre server.

6. Now build, install and run the Android PhoneGap app with your Android device plugged into your computer and debugging enabled.  To verify your phone is connected properly run this command “adb devices” .  You should see something like this returned:

C:\src\Android\scripts>adb devices
List of devices attached
5c8f6de6 device

Once you confirm the device is connected, run the PhoneGap run command in your PhoneGap project home directory.  If are not following me, read my previous post about how to set up a Hello World project for PhoneGap.  On my computer that looks like this:

“C:\src\Android\phonegap\hello>phonegap local run android -d”

That command should build and run your app on your Android device.

7.  Once the app starts, go back to your Weinre server’s home page and click the first url on the page.  Mine looks like this:

debug client user interface:

http://192.168.1.103:8081/client/#anonymous

This is the moment of truth.  If you held your mouth just right through this then your Weinre server will connect to your client app and show you the remote debug interface.  If you didn’t then you will see the error message telling you it failed.  Look on the Weinre website and it will demonstrate how to debug your app.

Have fun and good luck!