Recently I ran into an issue with several websites and their functionality, or lack thereof, on Mobile Safari in iOS 4.3.3 on the iPad.
Mobile Safari doesn’t give you much in the way of native debug tools. There is a debug console, which will display, at least in theory, any CSS, HTML or Javascript errors.
The only problem is that it won’t actually display all HTML errors. For instance the problem I ran into was an HTML tag mismatch between an opening H2 and a closing H3. Mobile Safari on iOS 5.1 displayed the page as designed, however on iOS 4.3.3 the bad closing tag was omitted which meant that all the children of that H2 had the CSS style “hidden” applied to them due to a class assignment.
You would think that this might trigger an error code in the debug console, however no such error occurred, and using the Safari iOS 4.3.3 – iPad user agent in desktop Safari on Mac OS X did not exhibit the error.
In searching for a tool to assist with debugging this problem natively on the iPad I ran across a great bookmarklet by Mark Perkins, called Snoopy.
This bookmarklet gives you all kinds of nifty information about the page you are looking at, including a view of the generated source. Thanks to this tool I was able to find out exactly what was breaking the display on the iPad.