So here’s some general info I found while going through this process. Big disclaimer: This is more of a brain dump than anything, so it isn’t meant to be all that informative, but I wanted to jot it down for my own memory. Comments are welcome.
Weinre ended up being the winner for me. It seems like an absolutely perfect solution for the PhoneGap world because as long as you’ve exposed your Mac to web sharing, you can use the Mac client and with a simple line of code, you have access to everything about your application you’d expect from something like the Chrome Developer Tools. I think I’ll try to do a more in-depth blog post on this in the near future, but for now, here’s my rough setup:
I downloaded the Mac client from this page. I had web sharing on my Mac set up for the IP address 10.1.0.4. When it starts up, the Weinre client creates a
~/.weinre/ directory but if you want to customize the app at all you need to create a
server.properties file in that directory. With this you can specify the host that the Weinre debugger will connect to. Mine was this:
boundHost: 10.1.0.4 httpPort: 8080 reuseAddr: true readTimeout: 1 deathTimeout: 5
Now the Weinre debugger is using the same IP address that any other devices use to connect to my Mac when they share the same network. When I read through the Weinre documentation, the examples focused on browser-apps that would be able to load a URL from that 10.1.0.4 URL. So at first I was kind of confused where PhoneGap fit in. But then I had my “duh” moment: one of the beautiful things with PhoneGap is that we’re just dealing with a web view instance in a native app. So all I had to do was take the script block that the “default” page creates for you and put that in my PhoneGap code. I started with the default PhoneGap template from Dreamweaver so I just added that line to my app:
It’s that first
script block that gives me access to the Weinre debugger. Then I built that app and packaged it into an
.apk file and installed it on my phone.
Voila! I automatically had access to all of the Weinre features for my PhoneGap app!
Welcome to the edge
As far as I can tell, we’re getting into some edgy territory here. Even the Google searches are pretty sparse. So if you’re coming from the Flash/Flex world, I think there will be some learning curves.
But I set out to do this with Android. For iOS, arguably the platform that is the most important, it’s way easy because the tools are much better. Since all PhoneGap projects are native projects, you can use the exact same debugging/deployment workflow as other iOS apps. That means you can leverage the power of Xcode to help out. I haven’t spent a ton of time in Xcode, so I’ll be spending some cycles on that this week as well, but it looks much, much nicer.