[ Pobierz całość w formacie PDF ]
.Stepping through codeWhen the debugger is running, the source document window displays verticalyellow bars where the script statement is as well as a blue arrow pointing to theline that is the next one to execute.To execute that statement, click the Into orOver buttons in the toolbar.The difference between the buttons becomes apparentif the statement about to be executed contains a call to a custom function in yourapplication.If you click the Into button, the debugger scrolls to that subroutinefunction in the document (or opens a new source document window if it is in adifferent document).This allows you to follow the execution logic throughnested functions.In the Call Stack window, you see the nested function at thetop of the stack.While stepping through the nested function, you can continue to click the Intoor Over buttons, with the Into button leading to any further nested function.Whenthe stepping reaches the end of the nested function, the view returns to thestatement of the calling function (and the nested function name pops off thestack).From inside a nested function you can also zoom back out to the callingfunction by clicking the Out button.If you don t want to step through nestedfunctions at all, click only the Over button.Occasionally, you may need to inspect only a few places within your script, eventhough they may be separated by a lot of executing lines (for example, you wantto step through lines above and below a repeat loop, but not through dozens ofloop iterations).By setting multiple breakpoints in a document, you can single-step where you want and then let processing continue at normal speed until thenext breakpoint.Click the Run button to exit single-stepping while letting thescript continue its normal course.Or if you want to bail out of the script entirely,click Abort.Part IV Putting JavaScript to Work928Observing values manuallyAs the debugger single-steps through your code, you can inspect the currentvalue of any expression in the code.This is a manual way of observing variablesand expressions, and is convenient when you don t need continued views tocertain values.To observe a value, select a variable or expression in the sourcecode, and then click the Eval button in the toolbar (or right-click the selection witha two-button mouse).Appearing in the Console window is the item you selectedand (in red) its current value.If a variable has not yet been initialized its valuedisplays as null.As a second manual method, you can also type an expression in the type-in fieldat the bottom of the Console window.This expression can be any valid JavaScriptexpression, including one that uses variables and document objects from thedocument currently being stepped through.When you press Enter, the valueappears in the upper area of the Console window.Observing values automatically  watchesA more efficient way of keeping tabs on expression values while steppingthrough code is to set up what are called watches.These are values that evaluatefor each step through the program (even if the value is not directly affected by thecode in the step) and display their results in the Console window.You can set up watches two ways.The easy way is to select an expression in thecode (while the debugger is stepping or is at rest) and choose Copy to Watch fromthe Edit menu.To view the expressions being watched, choose Watches from theEdit menu.The window that appears lists each item.You can also click the Newbutton in the Watches window to type in an expression to watch.If expressions rely on each other, you may want to control the order in whichexpressions are evaluated at each step.You can select an item in the Watcheswindow and click the Move Up or Move Down buttons to adjust the item s positionin the list of watched items.As the debugger steps through a script, all items in the Watches window areevaluated, and their results are displayed in the Console window.This lets youkeep an eye on several items all at the same time without any extra clicking orselecting beyond the buttons that control the stepping.Writing Your Own Trace UtilitySingle-stepping through running code with the JavaScript Debugger is a valuableaid when you know where the problem is.But when the bug location eludes you,especially in a complex script, you may find it more efficient to follow a rapid traceof execution with intermediate values along the way.The kinds of questions thatthis debugging technique addresses includeHow many times is that loop executing?What are the values being retrieved each time through the loop?Why won t the while loop exit?Chapter 45 Debugging Scripts929Are comparison operators behaving as I d planned in if.elseconstructions?What kind of value is a function returning?With thoughtfully placed calls to the trace() method of the external libraryshown next, the resulting report you get after running your script can answerquestions like these and many more.The trace.js libraryListing 45-2 is the listing for the debug.js library file.It consists of one globalvariable and one function.Listing 45-2: trace.js libraryvar timestamp = 0function trace(flag, label, value) {if (flag) {var funcName = debug.caller.toString()funcName = funcName.substring(10, funcName.indexOf(")") + 1)var msg = "In " + funcName + ": " + label + "=" + valuevar now = new Date()var elapsed = now - timestampif (elapsed [ Pobierz całość w formacie PDF ]