Setting up a debugging environment on the iPad
LindsayMy recent assignment has been to work on iPad compatibility for a web video player project. Of course, out of the box, an iPad doesn’t have any tools to make that easier. It can be very difficult to figure out what’s going wrong when you have nothing but the view of your site in the browser. Here are some helpful links/tips on how to set up your iPad (or iPhone) for debugging.
First set up Safari so that you can see the console logging.
Next install a bookmarklet that will let you install other bookmarklets into Safari without having to sync with iTunes. If you haven’t used bookmarklets before they are bits of Javascript that run in whatever page you are viewing in the browser and do wondrous things. In this case you will need them to add some tools you can work with to diagnose and debug.
Once you have the saver bookmarklet visit these sites for your tools:
- FireBug Lite Yes! FireBug on the iPad! Rejoice!
- View Source
- A nice suite of tools including an HTTP header viewer
- Various debugging tools
- And even more tools
There are many other helpful bookmarklets out there if you search for them.
So you’re thinking: “Dang, how do I get all those URLs on to the iPad in the first place since my dev one doesn’t have email hooked up? I sure don’t want to type all that on the soft keyboard…”. Well, you’re in luck. There’s a great service you can put your links in called TextSnip that will let you put any bits of text (code snippets, urls, whatever you need) on their site for retrieval somewhere else. You can even customize the url so it’s easy for you to remember (if you do this, create an account on the site to have access to all your snips in the future!). You could use Del.icio.us or any other bookmarking service, but TextSnip is very handy and not just for URLs.
So now you have a half-way decent debugging environment on the iPad. Have fun coding!
0 min expected wait time
4 Comments on "Setting up a debugging environment on the iPad"
FireBug Lite will definitely save me some time!! Thanks for the tips!
Oh sweet. Good find… thanks!
… of course, you can pretty close to ipad-ness by just using the develop menu in safari to switch your user agent to “iPhone” or “iPad” or whatever. Developing in a standard browser with the safari debug tools, which are actually pretty good, is a lot easier, since you can just hit “refresh” every time you tweak something.
Now… don’t get me wrong — there are always a few little things different on the actual device, but safari on the mac is pretty darn close to safari on the ipad….
@Jon – Our experience with trying to making things work the same in Safari on a computer with the user agent spoof verses what actually happens on the iPad were different enough that it just wasn’t feasible to depend on that emulation for anything other than making sure the basic functionality worked. The differences between the behaviors of “touch” and “click”, a bunch of CSS and javascript functional differences and the very different behavior of the video tag made it necessary to figure out how to do some of the debugging on the iPad itself. Your projects may vary, but I am glad that the only option is not the user agent spoofing!
@Lindsay: I am trying Firebug Lite on the iPad now and don’t see how to scroll the script inspection window to set breakpoints. The inspection window is fixed-height and doesn’t respond to scroll gestures. Opening it in a new window doesn’t do the trick. There must be something simple that I’m missing. How is that done?