Weinre and GapDebug

Weinre Is Awesome

For the last year-plus I have been using weinre (Weinre website) for debugging my Cordova apps.

Basically it's a UI very similar to Chrome's F12 tools: DOM browsing, CSS editing, JavaScript console, etc. ... for use with remote mobile apps. You insert a line of JavaScript into the client code and it loads a whole bunch of hooks and behaviors, which you can then talk to via that UI in your browser. Voila: type alert('Hello') into your browser, and your app has a popup alert.

Unlike the remote debuggers provided with various SDKs, it is not platform-specific. The very same browser window can debug apps on Windows Phone, Android, iOS, ... And that's pretty slick.

Weinre is about the greatest thing since Firebug, for figuring out why your Cordova app is misbehaving. For Cordova-based apps in particular, an online actively-on-the-phone debugger is important, since JavaScript failures just do nothing.

But Now There's GapDebug

The down side of weinre, is that it's a network thing. You need a server running weinre, and both your phone and your browser connect to it. If your phone is using its mobile network and your PC is on your home wifi, then you need a third-party server e.g. at work or on an EC2 instance. If you're running both the phone and your PC on the LAN, Windows Firewall can be a nuisance and prevent the phone from connecting (the only symptom being that your phone never shows up on the list of remote connections).

So

Genuitec embraced the cable, with GapDebug. (Genuitec Website)

It's basically the same idea as weinre: a local service that communicates with your phone and app, with a browser-based UI featuring a CSS editor and JavaScript console and all. It's all the awesome of Chrome's F12 tools.

The first big difference from weinre is that GapDebug works over the cable. I have my phones plugged in via cable anyway, so I can push code updates and also not have the battery conk out, so adding a cable is nothing new.

The second big difference, is that weinre requires that you place a <script> tag into your HTML, then remember to remove it for production. GapDebug uses the android:debuggable flag in AndroidManifest, so I'm equally likely to forget... but then again I make changes to AndroidManifest less often than to index.html so an outstanding change there is noticeable.

The third big difference, is that GapDebug works over the cable... and not over the Internet. Weinre's ability to work over the Internet makes it fill a slightly different niche, when the need arises.

Why Choose?

So, weinre is obsolete? Well, no. They hold slightly different places.

For my day-to-day debugging on my own phones, plugged in via cable anyway, GapDebug is my tool of choice.

But what if I want to debug someone else's phone? Then I stick the weinre <script>tag into the HTML, ship to the beta tester, then open up my browser. Their copy of the app calls home to weinre, and I can work with it right there. If she fires up Skype, I can even talk with the beta tester and see her phone while I fuss with it remotely. Can't do that over a three-foot cable!

My advice: Use both. :)