One of my tasks at work last week was to take the swanky looking new website template I coded and find out why it was rendering differently in Mobile Safari and fix the problems.
I figured this would be easy, all browsers have tools for helping you with this, even IE right? Wrong! Apple totally nerfed the tools of Mobile Safari and there is nothing available except a mediocre javascript console, you cannot even view source, let alone inspect the DOM!
So I decided to poke around for a few minutes and email a few techy friends to find out howto proceed. After returned emails saying basically you are out of luck and very little luck on finding my own resources I finally stumbled my way onto a gem that saved my day, an article on godaddy by user Lindsay that has since been taken down for some reason. Luckily Google caches everything and so I will repost the text of the article here so it doesn’t get lost forever.
My 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 toolsThere 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!
The absolutely necesary links from the original article are:
The CSS Ninja bookmarklet that lets you save other bookmarklets – You cannot do anything with out this!
Firebug Lite – I found that when I tried to visit Firebug Lite’s page on the iPad it woudl crash, I used TextSnip to get the Firebug Bookmarklet onto the iPad
TextSnip – without this I could not have installed Firebug Lite, the main thing you need.
The other resources you will need are:
iphone ipad ipod Detect – Necesary to send iOS only code once you find out what the problem is
YouTube HTML5 Video Code – very useful, switch all your flash video for HTML5 and they work on iOS
For now at least the tools for working on and debugging websites on Mobile Safari are a do it yourself install and still a bit buggy, though they ended up being extremely useful and allowed me to solve my rendering problems.