Using Weinre to Debug a Phonegap Build Application
What I’m about to show you is basically magic, or at least that’s how I felt when I started editing my PhoneGap Build application live as it ran in front of me. The problem with using PhoneGap in a Sencha Touch application is that you can’t exactly test it in your browser anymore, you basically just upload it and hope everything works the way it should. Not with weinre though, weinre is a debugging tool that is essentially exactly the same as using the debugging tools in Chrome – except you can run it on your computer whilst your application runs on your phone. This means as well as viewing the console (and a lot of other things), you can make changes to the DOM and have those changes reflected immediately as your application is running on your phone. Here’s it running on the latest app I’m working on, I took a screenshot of the console view:
Now, you can either run this locally if you have npm installed or remotely with PhoneGap Build. Since it is a lot easier to run it remotely I will show you how to get that up and running but you can go here to learn how to run it locally.
Here’s how to do it
First of all set up your PhoneGap Build application as usual, then go to the PhoneGap Build website and open up your current application. Go to the settings tab and check the box labelled “Enable debugging”. Now, upload your application as per normal and install it on your device once it is ready. From the PhoneGap Build control panel, click the ‘Debug’ button and then open the application on your phone. Give it a second and you should see the debugging options we love so much popping up before your eyes. That’s it, like I said, easy! Go ahead and destroy your application by deleting and changing random things in the DOM, it is very cool to see the changes take effect on your device.
P.S. If anyone knows why it’s called “weinre” please let me know in the comments. I have no idea.