Debugging Web Content on iOS

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.

To enable Web Inspector on iOS

1. Open the Settings app.

2. Tap Safari.

3. Scroll down and select Advanced.

   

4. Switch Web Inspector to ON.

   

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.

All of Web Inspector’s features on OS X—such as timing HTTP requests, profiling JavaScript, or manipulating the DOM Tree—are available on iOS as well. The sole difference is that by selecting your web page through the Develop menu, you actively inspect web content on your device instead of on your Mac. If you browse to another URL on your device with the Inspector window still open, you’ll notice that the inspected data reloads to reflect the page you navigated to.

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.

Use JavaScript to Interact with Your Device

You can communicate to your device from your Mac by sending JavaScript commands with the interactive Web Inspector debug console found under the Log inspector. Through the debug console you have access to variables, functions, and the DOM tree of the page being inspected. As you start typing, notice that acceptable values autopopulate. Press Return to send your command, and you receive a response, as shown in Figure 12-4.

Conversely, you can create messages on your device and send their values to your Mac for observation. Throughout your JavaScript code, you can call the log(), warn(), and 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 log() method:

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.