Chapter 18

Debug and Deploy

WHAT YOU WILL LEARN IN THIS CHAPTER:

• Using an IOS Simulator on your Mac computer
• Debugging with Safari on Mac or Windows
• Debugging options on your IOS device

Get in, get out. That’s the attitude that most developers have in testing and debugging their applications. Few developers look forward to these tasks during the development cycle, and so they want to efficiently get into the code, figure out what’s working and what’s not, fix any problems, and then move on.

Given the heterogeneous nature of web apps, debugging has always been challenging, particularly when trying to work with client-side JavaScript. To address this need, fairly sophisticated debugging tools have emerged over the past few years among the developer community, most notably Firebug and other add-ons to Firefox. However, the problem is that most of these testing tools that web developers have come to rely on for desktop browsers are not ideal for testing IOS web apps.

Many IOS web app developers, unsure of where else to turn, might be tempted to resort to alert() debugging — you know, adding alert() throughout the body of the script code to determine programmatic flow and variable values. However, not only is this type of debugging painful, but it can also throw off the timing of your script, making it difficult or impossible to simulate real-world results. Therefore, in this chapter, I walk you through the various debugging options you have that either work on your desktop or directly on your IOS device. You will probably want to incorporate aspects of both as part of your regular debugging and testing process.

SIMULATING THE IPHONE OR IPAD ON YOUR DEVELOPMENT COMPUTER

Because you are coding your IOS web app on a desktop computer, you’ll find it helpful to also be able to perform initial testing on the desktop as well. To do so, you need to create a test browser environment that is as close as possible to the iPhone or iPad. IOS device emulation enables you to more easily design and tweak the UI (user interface) as well as test to see how your web application or site responds when it identifies the browser as Safari on IOS.

If you are running Mac OS X, you’re in luck as you have the best option — Xcode’s IOS Simulator and Safari. However, if you are developing on Windows, your only real desktop-based option is Safari.

Xcode’s IOS Simulator

Your best option for simulating an iPhone or iPad on your desktop is to use the IOS Simulator that is included with Xcode, the development environment used to create native IOS apps. (See Chapter 19 for details on downloading Xcode.) Not only does the IOS Simulator simulate the iPhone or iPad for testing native apps, but it also has a built-in Safari browser (see Figure 18-1) that simulates the functionality of Safari on IOS.

FIGURE 18-1

You can launch the IOS Simulator from within Xcode, but if you are not an Objective-C developer, you may not want to launch the Xcode IDE each time you want to debug your app. Because you won’t find an icon for the IOS Simulator in your Applications folder, here’s how to get quick access to it:

To use the IOS Simulator for viewing a web app, simply click the Safari icon with your mouse. You can load your app from a bookmark or type a URL in the Address box. Figure 18-2 shows a Web app displayed in the IOS Simulator.

FIGURE 18-2

The IOS Simulator is actually quite powerful. Not only do the controls inside of the Safari browser work as expected, but you can also determine which device to emulate as well as simulate rotation from the Rotate Left and Rotate Right items on the Hardware menu (see Figure 18-3). You can then test your app in landscape mode (see Figure 18-4).

FIGURE 18-3

FIGURE 18-4

Using Safari on Mac or Windows

Because Safari on IOS is closely related to its Mac and Windows desktop counterparts, you can also perform initial testing and debugging right on your desktop. However, before doing so, you need to turn Safari into an IOS simulator by performing two actions — changing the user agent string and resizing the browser window.

Changing Safari’s User Agent String

Safari on Mac and Windows enables you to set the user agent provided by the browser through the User Agent list, which you access from the Develop menu.

If you don’t have the Develop menu available from the top menu bar, go to the Preferences dialog box and click the Advanced button. You see a checkbox there to enable the Develop menu (see Figure 18-5).

FIGURE 18-5

With the Develop menu enabled, choose the desired IOS user agent string you want to emulate in from the User Agent menu, as shown in Figure 18-6.

FIGURE 18-6

After you have selected an iPhone, iPad, or iPod touch user agent, the desktop version of Safari appears to your web app as Safari on iPhone.

Changing the Window Size

To get the same viewport dimensions in Safari, you need to create a bookmarklet (see Chapter 15) and then add it to your Bookmarks bar. The code for the bookmarklet is as follows for iPhone:

javascript:window.resizeTo(320,480) // For iPhone/iPod touch

For iPad, use the following:

javascript:window.resizeTo(480,640) // For iPad

WORKING WITH DESKTOP SAFARI DEBUGGING TOOLS

For years, Firefox was considered the browser of choice for web application developers because of its support for third-party tools and add-ons, such as Firebug. However, when creating an application specifically for IOS, you usually want to work with Safari-specific tools. Fortunately, because Safari on IOS is so closely related to the newer desktop versions of Safari, you can take advantage of the debugging tools that are provided with Safari on Mac and Windows. Because you are working with a close relative to Safari on IOS, you still need to perform a second round of testing and debugging on an IOS device, but these tools help you during initial testing of your code.

Working with the Develop Menu

The Safari debug tools are accessible through the Develop menu, which is hidden by default when you install Safari. (As I mentioned in the last section, you can enable it from Advanced section of the Preferences dialog box.)

Many of the menu items in the Develop menu are not relevant to iPhone web app development, but a few are worth mentioning (see Table 18-1).

TABLE 18-1: Useful Safari Develop Commands for the iPhone Web App Developer

The two Safari developer features worth special attention for your needs are the Web Inspector and JavaScript Console.

Working with Safari’s Web Inspector

The best debugging feature available in Safari is certainly the Web Inspector. The Web Inspector, shown in Figure 18-7, enables you to browse and inspect the DOM of the current web page. You can access this feature through the Develop menu. However, the handiest way to use it is to right-click an element in your document and choose the Inspect Element menu item. The Web Inspector is displayed, showing the element in the context that you selected in the browser window.

FIGURE 18-7

Here are the basic functions of the Web Inspector:

• Selecting a node to view: When you click on a node in the inspector pane, two things happen. First, the bottom pane displays node and attribute details, style hierarchy, style metrics, and property values. Second, if the selected node is a visible element in the browser window, the selected block is highlighted with a red border in Safari.
• Changing the root: To avoid messing with a massive nested DOM hierarchy, you can change the context of the Web Inspector. Double-clicking a node makes it the hierarchical “root” in the inspector pane. Later, if you want to move back up the document hierarchy, use the up arrow or the drop-down combo box.
• Searching the DOM: You can use the Search box to look for any node of the DOM — element names, node attributes, even content. Results of the search are shown in the inspector pane, displaying the line on which a match was found. If you want to get a better idea of the exact node you are working with, select it and then look for the red outlined box in the Safari window.
• Viewing node details: The Node pane provides basic node information, including type, name, namespace, and attribute details.
• Viewing CSS properties: The Styles pane displays CSS rules that are applied to the selected node. It shows the computed style of the selected element by showing you all of the declarations that are used in determining the final style rendering. The rules are lists in cascade order. Any properties that have been overridden are displayed with strikethrough text.
• Viewing style metrics: The Metrics pane displays the current element as a rectangular block displaying the width × height dimensions, as well as the padding and margin settings (see Figure 18-8).
• Viewing all properties: The Properties pane displays all of the DOM properties (such as id and innerHTML) for the selected node. Because you cannot drill down on object types, this pane is less useful than the others.

FIGURE 18-8

Working with the Scripts Inspector

The Web Inspector also sports a powerful Scripts Inspector, as shown in Figure 18-9. You can use it to inspect variables at point of execution, set breakpoints, step through your code, and view the call stack.

FIGURE 18-9

There are several tasks you can perform in the Script Inspector:

• Setting breakpoints and stepping through code: You can set a breakpoint in your code by clicking the line number on the left margin of the code window. As Figure 18-10 shows, an arrow is displayed on the breakpoint line. When the line code is executed, then the breakpoint is triggered. You can then step through the script as desired by clicking the Step Into, Step Out, and Step Over buttons. As you step through the code, Script Inspector updates its state for each line executed.
• Inspecting variables: The Scope Variables box at the top of the Script Inspector window displays the variables in scope (local, closure, global). You can inspect these variables by right-clicking them and choosing Inspect Element. A new Web Inspector window is displayed on top of the existing window showing the node in its hierarchy along with style, metric, and property details. Close the Web Inspector window to return to the current debugging session.

FIGURE 18-10

Although Script Inspector does not work directly with Safari on IOS, it does serve as the most powerful debugging option that IOS web app developers have in their toolkit.

DEBUGGING ON AN IOS DEVICE

So far, you’ve seen how to test and debug your IOS web apps on your desktop using desktop-based solutions. Although those tools are good for general testing or specific problem-solving, you need to spend some time debugging directly on IOS devices themselves. Unfortunately, no robust debugging tools such as Web Inspector are available, but there are some basic debugging tools that should be a standard part of your Safari on IOS development toolkit.

Debug Console

Safari on IOS includes an integrated Debug Console. If active, the Debug Console displays below the URL bar when an error is encountered or when it has a recommended tip (see Figure 18-11). You can click the right arrow to display a list of console messages (see Figure 18-12). You can filter the errors by JavaScript, HTML, or CSS.

FIGURE 18-11

FIGURE 18-12

You can enable the Debug Console from Settings ⇒ Safari ⇒ Developer. Inside this menu screen, you can turn on the Debug Console (see Figure 18-13).

FIGURE 18-13

DOM Viewer

The DOM Viewer, available from brainjar.com, is a web-based DOM viewer that you can work with directly inside of Safari on IOS. The DOM Viewer provides an expandable tree structure that lists all of the properties of a given node. When a property of a node is another node, then you can view its properties by clicking its name. The tree expands to show these details. The DOM Viewer is housed in a separate HTML page that is launched in a separate window from the original page.

Although DOM Viewer does not have the robust capabilities of the desktop Safari’s Web Inspector, it does have the assurance that all of the information you are looking at comes directly from Safari on IOS, not its desktop cousin.

TRY IT OUT: Using the DOM Viewer

To use DOM Viewer, follow these steps:

1. Download the source file at http://brainjar.com/dhtml/domviewer/domviewer.html.

2. Save the file in the same directory as your application.

3. Open a page in your app and add a script to the end of your HTML page that you want to inspect:

<script type="application/x-javascript">
window.open("domviewer.html");
</script>

4. Save the file.

5. Open the page inside Safari. If needed, click the View in DOM Viewer link.

How It Works

The DOM Viewer analyzes the DOM of the current document and displays the full document tree in a new tab inside Safari, as shown in Figure 18-14. You can view DOM node info and interact with it as desired to find the runtime details to track down bugs or missing functionality.

FIGURE 18-14

Specifying a Root Node

One of the things you immediately notice when working with the DOM Viewer inside of the small viewport of the iPhone or iPad is the sheer amount of information you have to scroll through to find what you are looking for. To address this issue, DOM Viewer enables you to specify a particular node (identified by id) as the document root. Here’s the code to add that specifies the desired element as the getElementById() parameter:

<script type="application/x-javascript">
  var DOMViewerObj = document.getElementById("Jack_Armitage")
  var DOMViewerName = null;
</script>

Because it will reference the desired element directly by getElementById(), you can add this code in your HTML page after the element you want to examine in the body but not before it.

Go to http://brainjar.com/dhtml/domviewer for full details on the DOM Viewer.

• WHAT YOU LEARNED IN THIS CHAPTER