Debugging code on a mobile device is still one of developers biggest problemes. But nowadays, there are a couple of possibilities to manage this. Today i want to give you a short introduction to Bugaboo (http://bugabooapp.com/), which is an open source tool for mobile web developers that provides an interactive javascript console for WebViews. This is very useful for designing and debugging mobile web apps and sites on iOS devices.

After downloading Bugaboo from iTunes Store you can follow these steps to use the helpful tool:

First of all your iOS device and your computer have to be connected to the same Wifi network. This is a must.

If you’re in one network start Bugaboo on your iOS device and browse to the website you want to debug. Now tap on the little wifi icon inside Bugaboo in the toolbar on bottom side.

Browse to a url in bugaboo

After pressing the icon you’ll see a dialog with an url – now open a web browser of your choice on your computer and you should see a web page named „Bugaboo Javascript Console“ as shown below.

Bugaboo Javascript Console

As you can see alle the javascript commands you type in will be executed on the web page shown in the Bugaboo app on your iOS device. Great tool for debugging javascript variables or objects – you can dump everything as usual, open alert windows etc. Of course you can also manipulate your DOM elements via javascript as usual.

Alert-Window via Bugaboo

DOM element manipulated

For more information you can find two videos on youtube that show you bugaboo in action:

Bugaboo Introduction:
http://www.youtube.com/watch?v=G8x_gAJ_vuo

Bugaboo in Depth:
http://www.youtube.com/watch?v=6a8Llw-m7Lg