Tài liệu Lập trình iphone chuyên nghiệp part 24 pdf

Testing and Debugging
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 applications, 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 yet
compatible with the iPhone and iPod touch platform.
Many iPhone developers, unsure of where else to turn, end up resorting 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.
While the number of debugging and testing tools are indeed limited right now for Mobile Safari,
you still have options that either work directly inside Mobile Safari or emulate Mobile Safari on
your desktop. You will probably want to incorporate aspects of both as part of your regular
debugging and testing process.
iPhone and iPod touch Debug Console
The 1.1.1 update of iPhone and the initial release of iPod touch introduced a Debug Console
inside of Mobile Safari. If active, the Debug Console displays below the URL bar when a scripting
error occurs. You can click the right arrow to display a list of console messages. The errors can be
filtered by JavaScript, HTML, or CSS. You can enable the Debug Console from Settings
Safari
Developer and turn toggling on the Debug Console option.
c12.indd 261c12.indd 261 12/7/07 3:00:31 PM12/7/07 3:00:31 PM

Chapter 12: Testing and Debugging
262
Working with Desktop Safari
Debugging Tools
Firefox has often been 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 iPhone or iPod touch, you will usually want to work with Safari - specific tools.
Fortunately, because Mobile Safari is so closely related to the newer desktop versions of Safari, you can
take advantage of the debugging tools that are provided with Safari for Windows and Mac. Because
you are working with a close relative to Mobile Safari, you will still need to perform a second round
of testing and debugging on an iPhone and iPod touch, but these tools will help you during initial
Safari testing.
Enabling the Debug Menu
The Safari debug tools are accessible through a Debug menu, which is hidden by default when you
install Safari. If you are running on a Mac, you can type the following command in a terminal window
(when Safari is closed):

% defaults write com.apple.Safari IncludeDebugMenu 1
Or, if you are working with Safari for Windows, you will want to edit the Preferences.plist file when
Safari is closed. This .plist file is found in the following locations. For Windows Vista:

C:\Users\[Your Name]\AppData\Roaming\Apple Computer\Safari
For Windows XP:

C:\Documents and Settings\[Your Username]\Application Data\Apple Computer\Safari
The file itself is an XML document, so use Notepad or another text editor to open it. When you open it,
modify the following
key
element at the end of the document, just before the final
< /dict >

and

< /plist >
closing tags:

< key > IncludeDebugMenu < /key >
< true/ >
Alternatively, in Safari for Windows, you can also enable or disable the Debug menu through
command - line arguments:
/enableDebugMenu
displays the menu and
/disableDebugMenu
hides it.
(These arguments are case sensitive.) Once you define this switch, Safari will remember the setting until
you change it back.
c12.indd 262c12.indd 262 12/7/07 3:00:33 PM12/7/07 3:00:33 PM
Chapter 12: Testing and Debugging
263
Figure 12-1: Safari’s Debug menu
Open the browser and the new menu appears, as shown in Figure 12 - 1 . Many of these menu items are
not relevant to Mobile Safari development, but a few are worth mentioning (see Table 12 - 1 ).
c12.indd 263c12.indd 263 12/7/07 3:00:33 PM12/7/07 3:00:33 PM
Chapter 12: Testing and Debugging
264
Table 12-1: Useful Safari Debug Commands for the iPhone Developer
Name Description
User Agent Spoof another browser (though current version does
not include a Mobile Safari user agent string).
Show Web Inspector View and search the DOM (currently Mac OS X only).
Show Snippet Editor Get instant rendering of an HTML snippet.

Log JavaScript Exceptions Turn on to log exceptions.
Show JavaScript Console View JavaScript errors occurring on a page.
Enable Runaway JavaScript Timer Toggle the timer that halts long-running scripts.
The two Safari debug features worth special attention are the Web Inspector and JavaScript Console.
Working with the Safari Web Inspector
The best debugging feature available in Safari is certainly the Web Inspector. The Web Inspector, shown
in Figure 12 - 2 , enables you to browse and inspect the DOM of the current Web page. You can access this
feature through the Debug 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.
At the time of this writing, the Web Inspector is only available on Mac OS X. However, expectations are
that a cross - platform version of this developer tool will be available in the future.
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 above .
❑
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 at the exact
node you are working with, select it and then look for the red outlined box in the Safari window.
c12.indd 264c12.indd 264 12/7/07 3:00:33 PM12/7/07 3:00:33 PM
Chapter 12: Testing and Debugging

265
Inspector window
Search box
Node, Style, Metrics,
and Properties
details panes
Move down
Node Ancestors list
Move up
Figure 12-2: Web Inspector in Safari
❑
Viewing node details: The Node pane provides basic node information, including type, name,
namespace, and attribute details.
❑
Viewing CSS properties: The Style pane displays CSS rules that are applied to the selected
node (see Figure 12 - 3 ). 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.
c12.indd 265c12.indd 265 12/7/07 3:00:34 PM12/7/07 3:00:34 PM