Murach’s JavaScript, C3© 2009, Mike Murach & Associates, Inc.Slide 1

Murach’s JavaScript, C3 © 2009, Mike Murach & Associates, Inc. Slide 1

Chapter 3

How to test and debug a JavaScript application


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.


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.


The Sales Tax application with a logic error


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.


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


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 = ""; }


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.


Problems with identifiers Misspelling or incorrectly capitalizing an identifier.

Using a reserved word, global property, or global method as an identifier.


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.


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.


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.


The source code that’s displayed when you click on the link


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.


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); } }


The alert dialog box the fifth time through the loop


Firebug in Firefox


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.


An error message with a stack trace


A profile of the functions that were called


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.


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.


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.


How to jump to a line number Type a pound sign (#) followed by a line number in the search

box.


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.


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.


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.


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."); }


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); }


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); }


The data that’s written to the Console tab


Internet Explorer 6 with an error indicator


The Internet Explorer message box


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.


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.


The Safari console when you click on the URL in a message


The Opera error console with an error message


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.


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.


The JavaScript console with an error message

Documents

Murach’s JavaScript, C3© 2009, Mike Murach & Associates, Inc.Slide 1