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

Chapter 12: Testing and Debugging
268
Industrial Strength Debugging with Drosera
If you recall from Chapter 1 , Safari is built on top of the open source WebKit browser engine. Drosera is a
high - powered JavaScript debugger that is included with the WebKit nightly builds, but is not part of
Safari itself. However, if you are running Mac OS X, you can download the latest nightly build of WebKit
at
www.webkit.org
and take advantage of using Drosera. At the time of this writing, Drosera is not
available on Microsoft Windows platforms. Refer to
www.webkit.org
for the latest compatibility
information.
As you would expect from a full - fledged debugger, Drosera enables you to set breakpoints, step into/
out/over functions, and view variable state at a point of execution.
Preparing Drosera for Safari
After downloading the latest nightly WebKit build and installing it to your Applications folder, you first
need to prepare your environment. Drosera works by attaching itself to a running WebKit browser.
However, by default, it does not recognize Safari. Therefore, follow these instructions to enable it:
1.
Be sure Safari, WebKit, and Drosera are all closed.
2.
Enter the following into a terminal window:

defaults write com.apple.Safari WebKitScriptDebuggerEnabled -bool true
3.
Launch Safari and navigate to your application URL.
4.
Launch Drosera.
5.
In the Attach dialog box, select Safari from the list and click Attach.

c12.indd 268c12.indd 268 12/7/07 3:00:35 PM12/7/07 3:00:35 PM
Chapter 12: Testing and Debugging
269
The Drosera debugger is shown in Figure 12 - 6 .
Figure 12-6: Drosera debugger
Working with Drosera
When you open your application URL, the source files will be automatically loaded into the Drosera
window. You can then view the JavaScript source code in the code window.
❑
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 12 - 7 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 but-
tons. As you step through the code, Drosera will update its state for each line executed.
c12.indd 269c12.indd 269 12/7/07 3:00:35 PM12/7/07 3:00:35 PM
Chapter 12: Testing and Debugging
270
Figure 12-7: Setting a breakpoint
❑
Inspecting variables: The variable box at the top of the Drosera window displays the variables in
scope. You can inspect these variables by right - clicking them and choosing Inspect Element. The
WebKit version of the Web Inspector is displayed on top of the Drosera window, as shown in
Figure 12 - 8 . The features of the Web Inspector are equivalent to the Safari Web Inspector
discussed earlier in viewing a node in its hierarchy along with style, metric, and property
details. Close the Web Inspector to return to the debugging session.
While Drosera does not work directly with Mobile Safari, it does serve as the most powerful debugging
option that the iPhone and iPod touch application developers have in their toolkit.
c12.indd 270c12.indd 270 12/7/07 3:00:35 PM12/7/07 3:00:35 PM
Chapter 12: Testing and Debugging
271

Figure 12-8: Inspecting the current state of an element in a debugging session
Simulating Mobile Safari on Your Desktop
In addition to using the debugging tools available for Safari for Mac and Safari for Windows, you can
also simulate running Mobile Safari on your desktop. This will enable you to look at the UI as it will look
in Mobile Safari as well as test to see how a Web application or site responds when it identifies the
browser as Mobile Safari. You can either customize the desktop version of Safari or you can use a free
tool named iPhoney.
Using Safari for Mac or Windows
Because Mobile Safari is closely related to its Mac and Windows desktop counterparts, you can perform
initial testing and debugging right on your desktop. However, before doing so, you will want to turn
Safari into an iPhone simulator by performing two actions — change the user agent string and resize the
browser window.
c12.indd 271c12.indd 271 12/7/07 3:00:36 PM12/7/07 3:00:36 PM
Chapter 12: Testing and Debugging
272
Changing Safari ’ s User Agent String
Safari allows you to set the user agent provided by the browser through the Debug User Agent list. At
the time of this writing, Safari 3.0 does not display Mobile Safari on its preset user agent list. However,
you can specify a
CustomUserAgent
in Safari ’ s preferences file to provide this custom string.
To do so on a Mac, navigate to the
com.apple.Safari.plist
in your
/Users/[Username]/Library/
Preferences
folder. Double - click it to open the Properties List editor.
Next, add a new
CustomUserAgent
property in these files and give it the following value:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko)
Version/3.0 Mobile/1A538b Safari/419.3
Alternatively, if you are using a Mac, you can type the following in the terminal window when Safari
is closed:

defaults write com.apple.Safari ‘CustomUserAgent’ ‘”Mozilla/5.0 (iPhone; U; CPU
like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A538b
Safari/419.3”’
You can then keep this as your default user agent setting until you change it back to normal through the
Debug User Agent menu.
To delete the custom user agent on a Mac system, you can enter the following as a command line:

defaults delete com.apple.Safari ‘CustomUserAgent’
Changing the Window Size
To get the same viewport dimensions in Safari, you will want to create a bookmarklet (see Chapter 10 ),
and then add it to your Bookmarks bar. The code for the bookmarklet is as follows:

javascript:window.resizeTo(320,480)
Using iPhoney
Rather than messing around with the settings of your desktop browser, however, you can use iPhoney, a
free open source iPhone web simulator created by Marketcircle (
www.marketcircle.com/iphoney
).
iPhoney (see Figure 12 - 9 ) is a great tool to use when you are initially designing an iPhone or iPod touch
UI as well as when you are performing early testing. One of the handy features of iPhoney is that you
can easily change orientations between portrait and landscape (see Figure 12 - 10 ). iPhoney also allows
you to spoof with the iPhone user agent, hide the URL bar, and turn off Flash and other add - ins.
c12.indd 272c12.indd 272 12/7/07 3:00:36 PM12/7/07 3:00:36 PM