Sunday July 1

Firebug for iPhone

Trying to debug web pages on my iPhone transported me back to a dark place I hadn't been in some time: The Land of alert() Debugging! Within the first few hours I had sent my phone into its first infinite modal loop, from which the only escape was to power down the phone and reboot it. While waiting for the reboot I pined for Firebug and my best friends console.log() and the command line. My first thought was to try and embed Firebug Lite on the phone, but the thought of trying to share that tiny screen with my app and the console was not pleasant, nor was the thought of typing JavaScript on the iPhone keyboard. I realized there is only one viable solution, which is to create a network proxy to the phone that allowed me to debug from the comfort of my computer with its big screen and real keyboard.

A few hours later, Firebug for iPhone was born. Basically, it is a little Python web server which acts as a bridge between your iPhone and the Firebug console running in the browser on your computer. When you call console.log() on the phone it sends your log message to the server, which reflects it back to Firefox (or Safari or whatever), which displays it in your nice big Firebug console. You can also enter JavaScript commands in the command line in Firefox and have them sent to the phone, evaluated, and sent back to Firefox. It all works surprisingly well!

Your iPhone needs to be able to reach the computer you run the server on. If your iPhone is on the same wireless network as your computer, the easiest thing to do is to just run the server on your computer. If they are not, then run the server on another computer that both your computer and the iPhone can access.

Here are the instructions for using Firebug for iPhone. It's still a little "homebrew" but with time we can make the installation more automatic with py2app/py2exe.

1. Download ibug0.1.zip and unzip it somewhere, anywhere on your computer
2. Make sure you have Python installed - if you are on a Mac, it is already there, if you are on Windows, download it here
3. Open your terminal and cd to the ibug directory that you just unzipped
4. Run python ibug.py launch - it will start the web server and open the console in your browser. If you don't want to open the console, remove the launch argument.
5. Copy the snippet of HTML that you see in the console and paste it into the head of any HTML pages you want to debug on your iPhone
6. That's it! console.log() calls on the phone will now show up in your browser, and you can use the command line to enter JavaScript commands that execute on the phone. To stop the server, just hit Ctrl-C.

I have only tested the server on Mac OS X, but it should work on Windows or Linux. I have only tested the console in Firefox, but it should work in other browsers. If you have any problems, please let me know so I can make this as robust as possible. This is just the beginning - I can see more of Firebug's functionality, such as the HTML and CSS inspection and editing, coming along later as I do more iPhone development myself.

Happy debugging!