Marco's dev log

A place for my development notes and ideas

Cross-compatible web application debugging

The number of people using our web applications with smartphone or tablet form factors is steadily rising. In 2015 more than two-thirds of our total traffic was generated by visitors with either a smartphone or a tablet. In early 2014 we refined our layout to better suit mobile devices and we are due to do that again by the end of the year.

Although the majority of our users are using iOS decives - especially iPhones - the mobile landscape is far from homogenous, and at times it is more challenging to make your web app look good on most of these configurations, than dealing with the multitude of desktop browsers. So after development there naturally comes a point at which we have to test stuff on mobile hardware. In the past we did this by deploying our app to our development server and test driving various mobile hardware configurations manually by accessing the app and playing through different scenarios. This turned out to be extremely inefficient. Not only did this consume too much time, but also had us run through the whole process of fixing, deploying the fix and testing over and over again.

No more deploy-to-remote for testing

Thanks to the magic of Vagrant we nowadays can spin up a virtual machine which matches our remote servers configuration. This virtual environment is accessible from all our debugging clients (i.e. smartphones, tablets, etc.) by way of our local Wifi. With this setup we were able to remove the time consuming deploy-to-remote step during our testing phase.

One thing with which we initially had trouble with though, was the actual in-browser debugging of our web apps frontend. At least Google’s mobile Chrome browser allowed you to remotely debug your web application via USB-debugging by simply connecting your device to your development machine. Changes in Code are immediate, and it just works like debugging through Chrome’s Inspector. That is, until your want to debug anything else than your application running on Android + Chrome.

Debugging with iPhone Simulator and Safari is just not good enough

Initially I experimented with using XCode’s iPhone simulator and debugging through safari. This turned out to be not good enough for our purposes because this means only one person with access to the physical (or virtual) Mac OS X device can do the debugging. We needed something which enabled multiple users to test accross various physical and virtual devices simultaneously. What we actually wanted was a cross-device compatible site-wide debugging solution.

Enter weinre

weinre is WEb INspector REmote. Pronounced like the word “winery”. Or maybe like the word “weiner”. Who knows, really. weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

Aside from it’s name weinre is super useful for testing your mobile websites and web applications through the familiar Webkit inspector interface. With weinre I can: * debug locally or remotely * debug on real or virtualized hardware * debug for mobile and non-mobile hardware * debug any remote property as long as I can inject the necessary JavaScript code (i.e. through a bookmarlet) * debug alone or with my team