Debugging Web Content on iOS
You should test your web content on both the desktop and various iOS devices. If you do not have iOS devices for testing, you can use iOS Simulator in the iOS SDK. Because there is a difference between web browsing on iOS and OS X, you should specifically test your content on iPhone and iPad or emulate the hardware device in Simulator. When testing in Safari on any platform, you can use Web Inspector to debug your web content.
For more tips on debugging web content in Safari, read Safari Developer Tools Guide. Read the section “Changing the User Agent String” in Safari Developer Tools Guide to learn how to simulate iPhone- and iPad-like behavior in Safari on OS X.
Enable Web Inspector on iOS
Web Inspector provides valuable insight on what might be going wrong with your web content. Even though Web Inspector is accessed through Safari on OS X, you can use it to inspect content that has loaded in Safari or in any
UIWebView on iOS.
Inspect From Your Mac
When Web Inspector on iOS is enabled, connect your device to your Mac with a USB cable. A menu item in the Develop menu of Safari on OS X appears, as shown in Figure 12-1. If your device name does not immediately appear in the Develop menu, try restarting Safari and/or reconnecting your connection cable.
The name of the menu item will be either the name of each device connected and/or the name of the simulator. A submenu containing each available page for each inspectable app appears. The app must be running in the foreground for it to appear in the Develop menu. Select the page that you are interested in, and Web Inspector opens in a new window.
The same interface and workflow to debug web content on OS X is used to debug web content on iOS, as shown in Figure 12-2.
Inspecting Content in a Web View
If you have a development provisioning profile installed on your device, you can debug any web view (
UIWebView object) in your app. This is particularly useful if your app manipulates the DOM in any way, and you want to observe the generated markup.
To inspect a
UIWebView, make sure that your app is open to the desired view so it appears under the Develop menu. The name of your app will appear as a submenu under the name of your device, as seen in Figure 12-3. When debugging web content in a web view, Web Inspector behaves in the same manner as debugging web content in Safari.
error() methods of the
console object. Pass an object containing any runtime variables you are curious about. In this way, you can determine the value of an object at any stage of the loading process, instead of just at the end via the debug console. For example, the following code prints the value of a variable to the console using the
console.log("The current value of myVariable is " + myVariable);
Observe the output of console logs, warnings, and errors in the Log navigator (control-8).
Not only can you pass messages back and forth between iOS and OS X but you can also trigger functions on your device from your Mac. The example shown in Figure 12-5 calls
window.alert(), but you can call any top-level function available to the webpage, including functions of your own. This behavior is useful if you want to closely examine the implementation of your code programmatically instead of through a user interface.
© 2012 Apple Inc. All Rights Reserved. (Last updated: 2012-09-19)