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.
First, I set up Weinre by simply following the installation instructions on the website:
1. open a command prompt and run this:
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:
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:
List of devices attached
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:
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!