Upload
imani-sturmer
View
217
Download
0
Embed Size (px)
Citation preview
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 1
Chapter 3
How to test and debug a JavaScript application
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 2
Objectives
Applied
Use Firefox and Firebug to find the cause of any syntax, runtime, or logic errors.
Display error messages in the Firefox browser and in any other browsers that you’re testing your application with.
Trace the execution of an application with alert statements.
Use the Firebug extension of Firefox to view error messages, view the stack trace, profile the execution of an application, and test short segments of code in the command line.
Use Firebug to set breakpoints, to step through the execution of the statements in an application, to view the current variables, and to set and view watch expressions.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 3
Objectives (continued)
Knowledge
Describe the three testing phases for a JavaScript application.
Distinguish between syntax, runtime, and logic errors.
Describe the use of stack traces, breakpoints, and watch expressions.
Distinguish between the three types of Step commands that you can use to step through a program: Step Into, Step Over, and Step Out.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 4
The Sales Tax application with a logic error
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 5
The goal of testing To find all errors before the application is put into production.
The goal of debugging To fix all errors before the application is put into production.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 6
Three test phases Check the user interface to make sure that it works correctly.
Test the application with valid input data.
Test the application with invalid data or unexpected user actions.
The three types of errors that can occur Syntax errors
Runtime errors
Logic errors
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 7
JavaScript code that contains errors var $ = function (id) { return document.getElementByID(id); } var calculate_click = function () { var investment = parseFloat( $("investment').value ); var annualRate = parseFloat( $("rat").value ); var years = parseInt( $("years").value ; $("futureValue").value = ""; }
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 8
Common syntax errors Misspelling keywords.
Forgetting an opening or closing parenthesis, bracket, brace, or comment character.
Breaking a single line into two valid statements where JavaScript inserts a semicolon.
Forgetting to use a semicolon that is essential to the logic of the code.
Forgetting an opening or closing quote mark.
Not using the same opening and closing quote mark.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 9
Problems with identifiers Misspelling or incorrectly capitalizing an identifier.
Using a reserved word, global property, or global method as an identifier.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 10
Problems with values Not checking that a value is the right data type before processing
it.
Forgetting to use the parseInt or parseFloat function to convert a user entry into a numeric value.
Using one equal sign instead of two when testing for equality.
A problem with floating-point arithmetic The number data type in JavaScript uses floating-point numbers
and that can lead to arithmetic math errors.
For example, 0.2 + 0.7 in JavaScript is 0.8999999999999999.
One way around this is to round the number to the desired decimal place with the toFixed method and then convert it back to a floating-point number with the parseFloat method.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 11
A problem with comparing values of different data types When you compare two values that are of different data types,
JavaScript will internally convert both values to numbers.
In this conversion, an empty string is converted to 0; true is converted to 1; and false is converted to 0.
This can lead to unexpected result when using the equality operator. For example, the expression 0 == "" will evaluate to true since an empty string is converted to 0.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 12
The Firefox Error Console with an error displayed
How to display the Error Console Use the ToolsError Console command or press Ctrl+Shift+J.
How to display the source code Click on the link in the Error Console.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 13
The source code that’s displayed when you click on the link
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 14
How to evaluate expressions with the Error Console Enter the expression in the Code text box and click the Evaluate
button.
However, you can’t use functions or variables in the expression.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 15
JavaScript with alert statements that trace the execution of the code var calculate_click = function () { var investment = parseFloat( $("investment").value ); var annualRate = parseFloat( $("rate").value ); var years = parseInt( $("years").value ); $("futureValue").value = ""; var monthlyRate = annualRate / 12 / 100; alert("Monthly Rate = " + monthlyRate); var months = years * 12; alert("Months = " + months); var futureValue = 0; for ( i = 1; i <= months; i++ ) { futureValue = ( futureValue + investment ) * (1 + monthlyRate); alert("Month = " + i + "\nFuture Value = " + futureValue); } }
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 16
The alert dialog box the fifth time through the loop
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 17
Firebug in Firefox
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 18
How to access the Firebug panel Click the Firebug icon, use the ViewFirebug command, or press
F12.
How to enable or disable a tab 1. Click the tab to open it, and click the down arrow next to the tab
name.
2. In the menu that appears, select Enabled or Disabled to enable or disable that tab for all websites.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 19
An error message with a stack trace
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 20
A profile of the functions that were called
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 21
How to run code in the command line A collapsed command line is at the bottom of the Console
indicated by >>>.
To run code in this command line, type the code and press the Enter key.
To expand the command line, click the red up arrow at the right side of the command line.
To run code in this expanded pane, enter the code and click Run to execute the code.
To clear the code, click Clear.
To collapse this pane, click the red down arrow at the bottom right of the command pane.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 22
How to get a profile of the functions that were called Click the Profile button at the top of the Firebug panel to start the
profiler.
After you’ve run the application a few times, click the Profile button again to display the profile report in the Console tab.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 23
The Script tab in Firebug
How to switch between JavaScript files Use the drop-down list that says “futureValue.js” in the screen
above to switch from one file to another.
How to search through the code Type your code in the search box in the upper right of the Firebug
panel. Then, press Enter.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 24
How to jump to a line number Type a pound sign (#) followed by a line number in the search
box.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 25
A breakpoint in the Firebug Script tab
How to set a breakpoint Click in the bar to the left of a statement.
To set a conditional breakpoint, right-click on a statement and enter a conditional expression in the resulting dialog box.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 26
How to step through JavaScript code from a breakpoint Click the Step Into button to step through the code one line at a
time.
Click the Step Over button to execute any called functions without stepping through them.
Click the Step Out button to execute the rest of a function without stepping through it.
Click the Continue button to resume normal execution.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 27
How to see the value of variables at each step At each step, the Watch tab displays the values of the current
variables.
You can also hover the mouse cursor over a variable name to display its current value.
How to set a watch expression Click “New watch expression…” in the Watch tab and type the
variable name or the expression that you want to watch.
How to disable or remove breakpoints To remove a breakpoint, click on the red breakpoint marker in the
Script tab, or click on the close button for the breakpoint in the Breakpoints tab.
To disable a breakpoint, click on the check box for it in the Breakpoints tab.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 28
Common methods of the Firebug console object log() error() profile() profileEnd()
Examples of the console object methods // Log the value of the months variable in the console. console.log("Months", months); // Display an error message in the console. console.error( "User entered an invalid value for months.");
How to test for the presence of the console object and the log method
if (typeof console == "object" && console.log) { console.log ("Function complete."); }
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 29
A JavaScript file with execution tracing var $log = function () { if (typeof console == "object" && console.log ) { console.log.apply(console, arguments); } } var $ = function (id) { return document.getElementById(id); }
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 30
JavaScript with execution tracing (continued) var calculate_click = function () { var investment = parseFloat( $("investment").value ); var annualRate = parseFloat( $("rate").value ); var years = parseInt( $("years").value ); $log("investment", investment); $log("annualRate", annualRate); $log("years", years); $("futureValue").value = ""; var monthlyRate = annualRate / 12 / 100; var months = years * 12; var futureValue = 0; $log("monthlyRate", monthlyRate); $log("months", months); for ( i = 1; i <= months; i++ ) { futureValue = ( futureValue + investment ) * (1 + monthlyRate); $log("month " + i + " futureValue", futureValue); }
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 31
The data that’s written to the Console tab
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 32
Internet Explorer 6 with an error indicator
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 33
The Internet Explorer message box
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 34
How to display an error message with IE Double-click the error icon in the lower left corner.
If necessary, click the Show Details button.
If you always want the error message to be displayed, you can click the checkbox before closing the message box.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 35
The Safari console with an error message
How to display the Safari console Display the Develop menu.
To do that, use the EditPreferences command, click the Advanced tab, and check the “Show Develop menu in menu bar” checkbox.
Then, to display the console, use the DevelopShow Error Console command.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 36
The Safari console when you click on the URL in a message
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 37
The Opera error console with an error message
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 38
The Opera developer tools
How to open the error console and the developer tools To open the error console, use the ToolsAdvancedError
Console command.
To open the developer tools, use the ToolsAdvancedDeveloper Tools command.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 39
The Chrome browser with the Developer menu
How to open the JavaScript console Select the DeveloperJavaScript Console command.
How to open the debugger Select the DeveloperDebug JavaScript command.
Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 40
The JavaScript console with an error message