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

Industrial Strength Debugging with Drosera If you recall from Chapter 1 , Safari is built on top of the open source WebKit browser engine.. While Drosera does not work directly with Mob

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

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

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

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

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

Figure 12-9: iPhoney simulates the iPhone on your Mac desktop

Figure 12-10: Rotating iPhoney to landscape mode

Debugging Inside Mobile Safari

So far,you ’ ve seen how to test and debug your iPhone and iPod touch applications on your desktop

using desktop - based solutions While those tools are good for general testing or specific problem

solving, you will want to spend a good part of your time debugging directly on the iPhone or iPod touch

devices themselves Unfortunately, no robust debugging tools such as Drosera are available, but there

are several community - based debugging tools that should be a standard part of your Mobile Safari

development toolkit

Firebug for iPhone

Joe Hewitt — developer of the popular Firefox debugger, Firebug — has developed a debugger for

iPhone and iPod touch called Firebug for iPhone This debugger is a Python - based Web server running

on your desktop computer It connects Mobile Safari on your iPhone to a Firebug console running on

your desktop When code is executed inside of the Mobile Safari browser, Firebug for iPhone logs the

details directly to the Firebug console

At the time of this writing, the Firebug console was not functional inside Safari 3.0 for Mac beta

Therefore, if you experience problems, be sure to run it inside of Firefox on your desktop machine

Before beginning, you will need to download the free, open source file at www.joehewitt.com/blog/

firebug_for_iph.php You will also need to make sure you have Python installed on your

computer Mac systems already have it If you are running Windows, you can download it

at www.python.org/download

Launching Firebug for iPhone

Once you have downloaded the zip file and unzipped it into a folder on your computer, open a terminal window in Mac or a command window in Windows Change to the directory into which you placed the files Then, enter the following command line:

python ibug.py launch

Your browser will load with the Firebug for iPhone page displayed (If the console is opened in Safari, simply copy and paste the URL in Firefox and then continue.) See Figure 12 - 11

Figure 12-11: Firebug for iPhone

Adding a Script Tag to Your Page

The Firebug console provides a script tag that you need to copy and paste into the head of each page of your iPhone application The tag will look something like this:

< script type=”application/x-javascript”

src=”http://10.0.1.196:1840/ibug.js” > < /script >

Note that if you are running a firewall, you may need to open the port (specified after the colon in the

script tag) that Firebug uses In the previous example, Firebug is using the 1840 port

Debugging with Firebug for iPhone

Once you have the Firebug console running, you are ready to begin testing To test, simply interact

with your application on your iPhone or iPod touch Firebug will log any exceptions or errors on

your desktop

Firebug for iPhone also provides a command line in which you can enter JavaScript code and have it

execute on the iPhone As a simple example, enter alert(“Hello world”) into the command line and

the alert box is displayed on the iPhone

Terminating the Debug Session

When you are done, close the running instance of Python by pressing Ctrl+C in the Terminal window

DOM Viewer

The DOM Viewer, available from Brainjar.com, is a Web - based DOM viewer that you can work with

directly inside of Mobile Safari 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

While 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 Mobile Safari itself,

not its desktop cousins

Starting the DOM Viewer

To use DOM Viewer, follow these steps:

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

in the same folder as your application

2 Add a test link to your page to launch the viewer:

< a href=”domviewer.html” target=”_blank” > View in DOM Viewer < /a >

Alternatively, you can add a script to the end of your HTML page in which you wish to inspect:

< script type=”application/x-javascript” >

window.open(‘domviewer.html’);

< /script >

The problem with this solution, however, is that iUI gets in the way of the default open action if

you are using an iUI - based application

3 Save the file

4 Open the page inside of Mobile Safari If needed, click the View in DOM Viewer link

The DOM Viewer is displayed in a new pane inside of Mobile Safari (see Figure 12 - 12 ) Interact with it as desired

Figure 12-12: DOM Viewer

Specifying a Root Node

One of the things you will immediately notice when working with the DOM Viewer inside of the small iPhone viewport is the sheer amount of information you have to scroll through to find what you are looking for To address this issue, DOM Viewer allows you to specify a particular node (identified by id )

as the document root (see Figure 12 - 13 ) Here ’ s the code to add, specifying the desired element as the getElementById() parameter:

< script type=”application/x-javascript” >

var DOMViewerObj = document.getElementById(“Jack_Armitage”) var DOMViewerName = null;

< /script >

Figure 12-13: Specifying a root node for the DOM Viewer

Because it will reference the desired element directly by getElementById() , you can add this code in

your HTML page after the element you wish to examine in the body but not before it

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