Debugging
OpenLaszlo provides a sophisticated tool for debugging purpose. This tool allows you to view runtime error messages, evaluate variable values, etc
When developing an OpenLaszlo application, you can display the Debugger window. It looks like the one in Figure 14.1.
Figure 14.1. The Debugger Window
You can activate the Debugger window by doing one of the following.
Appending the query parameter debug=true at the end of the URL used to request the OpenLaszlo application. For instance:
http://localhost:8080/lps-4.0.x/app14/debugTest.lzx?debug=true
Clicking the Debug radio button and clicking the Compile button. See Figure 14.2.
When activated, you can control the Debugger window as you would other views. The Debugger window is an instance of the Debug class, which is a subclass of LzView. Therefore all attributes in the LzView class are also available in the Debug class. This means, you can specify the x, y, width, height, and other attributes. Some attributes, such as bgcolor, cannot be changed.
To change the appearance of the Debugger window, use the debug tag. Here is an example:
<canvas width="580" height="400" debug="true">
<debug width="200" height="100" x="10" y="10"/>Note also that the debug tag can only be a direct child of <canvas>.
The Debug class is the topic of discussion of the next section.
Debug Class
The Debug class has one attribute, showInternalProperties. This attribute is described in Table 14.1.
| Name | Usage | Type | Default | Accessibility |
|---|---|---|---|---|
| showInternalProperties | Tag and JS | boolean | read-write | |
| Description. Indicates whether or not the internal properties should be shown. | ||||
The following are the methods defined in the Debug class.
backtrace(frameCount)Copy the snapshot of the current call stack into a LzBacktrace object, which can then be printed or inspected. This method is only available if if the application is compiled with --option debugBacktrace=true. The frameCount argument specifies the number of frames to omit from the backtrace (the default is 1).
error(control, args)Displays an error on the console. The control argument specifies a format control and the args argument represents any number of arguments.
format(control, args)Formats the output using the formatToString method. The control argument specifies a format control and the args argument represents any number of arguments.
formatToString(control, args)This method is similar to the printf function in the C language. The control argument specifies a format control and the args argument represents any number of arguments.
inspect(object, reserved)Displays the properties of the specified object on the debug console. The reserved argument is reserved for future use.
log(message)Sends the message to the log file.
monitor(object, property)Monitors the specified property of the specified object. Every time the value of the property changes, a message will be displayed in the Debugger window.
pad(string, length, dec, pad, sign, radix, force)Pads or trims a string to the specified length. The following are the arguments:
string. The value to pad.
length. The minimum width. If the value is negative, pad on the right.
dec. Ensure that dec characters to the right of ‘.’, padding with 0.
pad. Character to pad on left.
sign. One of the following: ‘’, ‘-’, ‘+’. The default is ‘-’.
radix. The radix to represent numbers in. The default is 10.
force. A boolean value that indicates whether or not numbers always have a decimal.
trace(object, method)Monitors the use of the specified method in the specified object. Every time the method is invoked, a message will be printed in the Debugger window.
unmonitor(object, property)Cancels the monitoring of the specified property on the specified object.
untrace(object, method)Cancels the monitoring of the specified monitor on the specified object.
warn(control, args)Displays a warning message on the console using the specified format control. The args argument represents any number of arguments.
Formatting Output
The write method is handy for writing messages quickly to the Debugger window. If the output needs formatting, however, you need to use the format method of the Debug class.
Here is the signature of the format method:
format(control, args)where control is the format control, a string that contains the text to be printed and can contain format tags to be substituted by the values specified in args. The args argument represents any number of arguments. For example, the following uses format with two arguments:
Debug.format("%*d", 15, 10);This prints 10 preceded by 15 spaces.
The format method is similar to the printf function defined in ANSI C. All standard printf conversions are accepted, except for ‘a’, ‘n’, and ‘p’. ‘e’, ‘f’, and ‘g’ conversions, which are accepted but equivalent to ‘f’. The ‘h’ and ‘l’ length modifiers are accepted but ignored. No errors are signaled for invalid format controls or insufficient arguments.
For instance, the LZX code in Listing 14.1 shows the power of Debug.format.
Listing 14.1. Using the format method
<canvas width="580" height="400" debug="true">
<debug width="400" height="200" x="10" y="10"/>
<script>
Debug.format("100 in hexadecimal: %#x", 100);
</script>
</canvas> |
The output in the Debug console is
100 in hexadecimal: 0x64
In this case, the control argument is assigned “%*d” and the args argument consists of two arguments, 15 and 10.
The format tags in the control argument has the following format:
%[flags][width][.precision][modifiers]type
Tables 14.2, 14.3, 14.4, 14.5, and 14.6 summarize the type, flag, width, and precision values you can use with the format method.
| Type | Description | Example |
|---|---|---|
| c | Character | A |
| d or I | Signed decimal integer | 125 |
| e or E | Scientific notation (mantise/exponent) | 1.24e2, 1.24E2 |
| f | Decimal floating point | 124.42 |
| o | Signed octal | 342 |
| s | string | “Holla” |
| u | Unsigned decimal integer | 3911 |
| x or X | Unsigned hexadecimal integer | DEFO |
| Flag | Description |
|---|---|
| - | Left align within the given width |
| + | Forces to preceed the result with a + or – sign. |
| blank | Insert a space if the argument is a positive signed value. |
| # | Used with o, x, or X type to indicate that the value should be prefixed with 0, 0x or 0X.
If used with e, E, or f forces the output value to contain a decimal point even if only zeros follow. If used with g or G the result is the same as e or E but trailing zeros are not removed. |
| Width | Description |
|---|---|
| number | The minimum number of character to be printed. If the length of characters to be printed is shorter than number, the result will be padded with spaces. |
| 0number | Similar to number, except 0s are used instead of spaces. |
| * | The width is not specified in the control string but by an integer value preceding the argument that has to be formatted. |
| Precision | Description |
|---|---|
| number | If the type is one of d, I, o, u, x, X, the precision specifies the minimum number of decimal digits to be printed. If the value to be printed is shorter than the specified precision, the result is padded with spaces.
If the type is e, E, or f, the precision specifies the number of digits to be printed after the decimal point. If the type is s, the precision specifies the number of character to be printed. If the type is c, the precision value has no effect. |
| Modifier | Description |
|---|---|
| h | The argument is to be interpreted as a short integer. |
| l | The argument is to be interpreted as a long integer or double.. |
| L | The argument is to be interpreted as a long double (floating point type) |
The Evaluator
In addition to displaying runtime error messages and writing debug info, the Debugger window can also be used for evaluating JavaScript global variables and expressions and executing JavaScript statements. The evaluator is the text field and the EVAL button at the bottom of the Debugger window. Figure 14.3 shows the use of the Debugger window for evaluation.
Figure 14.3. Using the Debugger window to evaluate values
To use the evaluator, you just need to type an expression or statement and click the EVAL button. If it is an expression, the expression value will be displayed on the Debug console. If it is a statement, the statement will be executed.
For example, if you type canvas.width, the value of the canvas’s width attribute will be printed. Assuming there is a view named v1, typing v1.height prints the view’s height in pixel.
The evaluator recognizes special characters. An underscore (_) refers to the value of the previous expression. Two underscore characters (__) refers to the result prior to the previous expression. Three underscore characters (___) refers to the result prior to the__expression.