Mobile web application debugging
If you develop anything for the web, you'll have to have come across the great tools modern browsers have for building web applications. Notably Chrome's Developer Tools, FireFox 11 (Aurora) and Opera's Dragonfly all help us gain an incite into the browsers interpretation of our code and allows us to quickly and easily find and repair bugs in our code, change our CSS properties and profile our web applications efficiency. In short, it's hard to imagine working without them...
Hello Mobile Browser
You have a web page running on a mobile device - how would you go about debugging it? You could just run it on your development machines browser and hope that it runs correctly or debug blindly while testing on a device -- not really an option for large mobile web applications with hundreds of lines of code.
A better option might be for the browser send it's debug information back to a debugger on your development machine.
Chrome for Android
At the time of writing, the beta is only available in selected countries (though the apk is widely available). Also C4A will only work on the latest Android 4.0 OS (Ice Cream Sandwich), presumably because of its full hardware rendering capabilities.
For the web application developer, you really want Chrome for Android! For those without an ICS device there are some options which immediately pop into mind:
- Download the Android SDK and use the ICS emulator, or
- If you have an Android device use a custom ICS ROM
Sounds pretty feasible right? I have tested Google Chrome for Android on an Ice Cream Sandwich emulator from the Android SDK, and unfortunately none of the pages render (white screen only). This is probably because the emulator is not hardware accelerated (and probably won't be for a while). Perhaps as C4A progresses, it will not require graphics hardware to render pages. But for the moment - we'll need to look elsewhere.
If you have an Android device without ICS and don't mind voiding your devices warranty, you could find and install a ICS ROM for your device. If you can find a good ROM for your device and it supports ICS hardware acceleration, you should be good to go!
The Chrome for Android's support for remote-debugging is great, and we definitely need more mobile browsers to offer native support for remote-debugging if we are to develop HTML5 web applications as diverse and rich as we've come to expect from web applications on non-mobile browsers.
Chrome for Android is one browser. We shouldn't forget that there are more than a few browsers available on the mobile market. Wouldn't is be great if there was a way to debug in any browser, even if that browser doesn't support remote debugging?
Introducing Weinre - WEb INspector REmote
Pronounced like the word "winery". Or maybe like the word "weiner". Who knows, really. -- http://phonegap.github.com/weinre/
Weinre is a web-based remote debugger requiring the Java runtime. There are three parts to it that you need to know about -- So download it from github and follow along:
In order to facilitate the communication between your device and the debugger we need to run a server.
Make sure you have Java RE installed and open a command prompt or terminal in the extraction directory and type:
$ java -jar weinre.jar -boundHost [your_host/ip] -httpPort [port]
The output for this should be something like this:
The -boundHost and -httpPort are optional, however, because you will most likely be debugging on a remote device on your network you will need to bind the server to your ip address. Leaving -boundHost out will bind the server to your localhost (127.0.0.1) and you will not be able to access the server from a device on your network. The port is specified just so that we know what it is.
The Client Interface
On your development machine, navigate (assuming your boundHost is 10.0.0.102 and httpPort is 8083) to http://10.0.0.102:8083/client/. If you included an 'identifier' in your included script add that to the end of the url. You should get the following:
This should look familiar to anyone who's used Chrome Developer Tools and I won't go into details here since it works pretty much the same way. How exciting!
Weinre isn't perfect but it is open-source; so if there's something you want to contribute to the project - fork it!