Debugging web app in iPad Simulator

问题:

I am developing a web app for iPad and testing it on Safari on Mac and Safari on iPad Simulator. Now there are some issues with CSS in iPad Simulator which work quite well in Safari on Mac. Now my question is, Is there a powerful debugging tool for Safari in iPad Simulator?

回答1:

Note: As of iOS6 this is not the correct way of doing remote debugging, leaving this answer for historical reasons but you should look into remote inspection with Safari, here is a good article: http://jeffreysambells.com/2012/09/22/ios-safari-web-inspector

Have a look at this, (a bash script I wrote) https://gist.github.com/2241976. It will allow you to open the iPad simulator and run Webkit's remote inspector, which will look just like this.

回答2:

When running safari in an XCode device simulator, the desktop Safari (v6) Develop menu shows those devices. From there, you can fire up the developer tools (DOM browser etc.) for the mobile browser. This helped me debug an mobile safari css issue without hardware.

回答3:

iWebInspector is quite a powerful tool for the iOs simulator's Safari. It uses the same inspector as Chrome and it works nicely (I've used it myself and found it really helpful).

From their website

iWebInspector is a free tool to debug, profile and inspect web applications running on iOS Simulator (iPhone or iPad). You can check resources, see and change HTML & CSS, use breakpoints on JavaScript code, create charts and more just as if you were on Safari for Desktop, Chrome or Firebug.

It works for any web in Safari -the web browser-, for a chrome-less webapp (full-screen) and also for apps using UIWebView -including PhoneGap applications-.