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

As some of you will know by now, Google have recently released a beta of Google Chrome for Android which has browser support for remote debugging. THIS IS AWESOME :)

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:

  1. Download the Android SDK and use the ICS emulator, or
  2. If you have an Android device use a custom ICS ROM

Emulator

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.

Custom ROM

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!

Other browsers?

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:

The Server

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.

JavaScript in your page

This part sits in your web application and relays events and messages (console.log) to and from the server. Simply include the Weinre JavaScript file in your html page as such:

<script src="http://10.0.0.102:8082/target/target-script-min.js"></script>
When debugging multiple apps you can set an 'identifier' for your application so that the channels don't get crossed when debugging. Simply add "#your_identifier" to the end of the script you included.
Weinre should only be used in the development stage, make sure you remove it before your app is released.

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:

Weinre Client

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!

Now that you've got this far, I should tell you that Weinre has its difficulties/bugs and is very limited compared to Chrome Developer Tools. There are problems across different browsers too. I would say this is mostly because debugging like this should be something that a browser supports natively and there's only so far one man can go with sand-boxed JavaScript and (comet?) XHR.

The most notably restricting aspect of debugging with Weinre is the lack of JavaScript debugging. I'm really not sure how you would go about implementing a JavaScript debugger in JavaScript; it would certainly be a mammoth task if at all possible. Again, this should be something supported natively by the browser.

Weinre isn't perfect but it is open-source; so if there's something you want to contribute to the project - fork it!

Happy debugging!

Further Reading

http://phonegap.github.com/weinre/
http://muellerware.org/papers/weinre/manual.html http://googleblog.blogspot.com/2012/02/introducing-chrome-for-android.html

No Responses

rss feed

This comment thread is closed. Got something important to say? contact us!