What debugging techniques do you use for iPhone/iPod web development?

Question

I'm working on a web application, and we are targeting the iPhone and iPod Touch. I'm familiar with the debugging tools for FireFox and IE (e.g. Firebug and IE Developer Toolbar), but I can't find anything for the iPod. I am not looking forward to using alert as my main debugging tool, especially when I expect mouse events to be one of the major issues.

Is this really the state of the art? What tools do you recommend?

Also, how similar is the html layout on an iPhone to that of Safari running on Windows? On a Mac?

Answer 1

The iPhone version of Safari includes a debug console that can be very handy. Settings > Safarai > Developer.

You can also use the Simulator in the iPhone SDK. There's no extra debugging, but it's easier than using a physical device all the time.

You can also use the desktop version of Safari for many things.

Answer 2

The web tools that target the iPod Touch and iPhone arenas include

[iPhone Remote Debug Console](
http://code.google.com/p/iphonedebug/)

BlackBaud Simulator for Windows

[MobileSafari Simulator](
http://www.testiphone.com/)

[iPhoney](
http://marketcircle.com/iphoney/)

Answer 3

While WebKit has a remote inspector, it is hard to enable on an actual iOS device (at least without jailbreak) and so most tools for it are simulator-only. iWebInspector looks promising for this, but keep in mind the simulator's WebKit library is not identical to the device's.

That's where weinre comes in. With weinre, you can "debug a web page displayed on your phone from your laptop". How it works is you run its custom HTTP server that hosts two things:

• a JavaScript file you include on the page you want to debug
• an Inspector page that you load on the machine you want to debug from

You start the server e.g. java -jar Downloads/weinre.jar --boundHost -all- --httpPort 4242 and then put a script tag like <script src="http://weinre-server-name.local:4242/target/target-script-min.js"> in the source code for your webpage and load the inspector by navigating to e.g. http://weinre-server-name.local:4242/client. When you load the target page on an iPhone on your local WiFi connection, the connection will show up in the client page on your mainframe and you can use the Inspector tabs to view/edit the page on the iPhone.

It has some limitations (no Javascript breakpoints and such) and can be a little laggy, but overall it's pretty magic.

Answer 4

There is also a nice tool called iWebInspector http://www.iwebinspector.com/