Debugging Websites for iPhone

Problem

I created a website that looked great in IE7+, FF, Chrome, and Safari, but on the iPhone a few things looked off.  Problems could be from the viewport being 480px wide but the website is 1000px wide so using percentages can mess it up… that’s another post sorry.  The problem is, how do I use something like firebug to debug the css and html in the iPhone mobile Safari browser?

 

Solution


The best solution is if you have a Mac OS X and the iOS 5 SDK.  If you don’t have a Mac or  you don’t have iOS5 SDK and don’t want to download it from the Mac App Store, move on to the next solution.  This solution involves a great FREE tool to debug, profile, and inspect  web applications running in the iPhone simulator is iWebInspector by Max Firtman.   This tool, as it says in the tool, enables a private API available on the iOS 5 framework.  It lets you inspect the web page or webapp  similar to firefox.  To use it:

  1. Download, install, and open  iWebInspector
  2. Click on the “Open iOS Simulator” button
  3. In the Simulator, open Safari and go to the URL you wish to debug.
  4. In iWebInspector click on the “Load from Safari” button.
  5. Click on the link it displays
  6. Now you should see the DOM and all it’s CSS attributes.

One thing annoying is that you can’t add CSS attributes to existing CSS classes.  A way around this is to add attributes to the element.style section for the element you want to alter.  Another thing I noticed is that the Simulator freezes from time to time.  To “unfreeze” it I had to quit both the simulator and iWebInspector and start over.  Other that it’s great!

 


A second option to debug a website in the iPhone is by using Firebug Lite.  Here’s what you do:

  1. Open this page in your iPhone browser and bookmark it.
  2. Rename the bookmark to “Firebug”.
  3. Tap the code below twice and choose “Select All” and then “Copy”.
    javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
  4. Edit the Firebug bookmark.  Remove the URL and paste the copied code into the bookmark.
  5. Save it.
  6. Go to the page you want to debug
  7. Once the page loads, select the bookmark named “Firebug” and it will run firebug on the page.

I prefer the first solution over this one because obviously, Firebug is very small on the iPhone.

 

keywords: iphone safari on desktop, iphone firebug
sources:
http://www.iwebinspector.com/
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone

Tagged with: , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*