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

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.

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