Debugging HTML / CSS layout on an iPad

In creating a new store locator for Dairy Queen, my layouts were working well on all the supported browsers.  On iPad, the layout works 99% but had some pixel discrepancies on a couple of elements.  I found this article by Lorenzo Orlando Caum on debugging layouts in with FireBug Lite very helpful:

http://iosbookmarklets.com/tutorials/firebug-lite-bookmarklet-ipad/

Definitely check out the article for more details.  The summation:

• Go to Safari and create a new bookmark of any page (this will be a placeholder)
• Go to Bookmarks and edit the new bookmark – rename it to FireBug Lite (or whatever you’d like)
• In the Address field, paste the following JavaScript:

  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');

When you’re ready to use FireBug, click on that bookmark after the page has loaded and you’re ready to go.  Pretty nifty!