Debug is the single instance of the class
lz.DebugService.
There are three ways to enable the debugger, as described in the Debugging chapter of the Developer's Guide.
The debugger can be useful in debugging your own code, but you should also use debugging to report bugs. The debugger method LzDebugService.bugReport() will output information that can be cut and pasted into a bug report to aid in diagnosing the bug.
The debugger has a range of methods for formatting output to the debugger console: LzDebugService.debug(), LzDebugService.info(), LzDebugService.warn(), and LzDebugService.error(). Each of these is based upon the basic formatted output method LzDebugService.format(). The variants prefix their message with a label (DEBUG, INFO, WARNING, or ERROR) and will print in a distinct color. When backtraces are enabled, these debug messages will also give a source location.
The debug messages can be silenced by setting Debug.messageLevel.
Debugger messages are inspectable, as the example below demonstrates. Clicking on the printed representation of the object (in blue) will show the details of the object. The message itself can also be inspected. When backtraces are enabled, one component of the message will be a backtrace that can be inspected to see the call chain and function arguments that resulted in the message.
Example 3. Debug output methods
<canvas debug="true" height="150">
<debug y="5%" height="90%"/>
<script><![CDATA[
Debug.format("Hello %s!\n", 'world');
Debug.debug("Click there -> %w to inspect the object", {a: 1, b: 2});
]]></script>
</canvas>
The debugger can be used to trace method calls using ??? and it can be used to monitor instance variables using ???
Example 4. Debug tracing and monitoring
<canvas debug="true" height="150">
<debug y="5%" height="90%"/>
<script>
var o = {a: 7, f: function (x) { return x * x;}};
Debug.monitor(o, 'a');
o.a = 42;
Debug.trace(o, 'f');
o.f(4);
</script>
</canvas>
The optional <debug> tag controls the appearance of the debugger console window when debugging is on.
| Name | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
inspectPrintLength
|
Number | read/write | ||
| Debug.inspect will truncate the printed representation of any properties whose length is greater than Debug.inspectPrintLength (default value 256). | ||||
messageLevel
|
String | read/write | ||
| Debug messages are enabled/disabled by the setting of Debug.messageLevel. The valid levels are one of the keys of Debug.messageLevels. All messages of a lower level than the current setting will be suppressed | ||||
printLength
|
Number | read/write | ||
| Debug.write will truncate the printed representation of any object whose length is greater than Debug.printLength (default value 1024). | ||||
showInternalProperties
|
Boolean | read/write | ||
| Debug.inspect will show internal properties if this is true (default is false). | ||||
| Name | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
messageLevels
|
Object | readonly | ||
| Possible values of Debug.messageLevel (q.v.) | ||||
Methods
-
bugReport() -
Format information about an error suitably for reporting a bug. This method can be used to create a report suitable for copy/pasting into a bug report. To use it, enable backtraces and debugging, inspect the error message that you believe reveals a bug, then invoke `Debug.bugReport()` in the debugger. Copy and paste the output of that call into your bug report.
Parameter Name Type Description error * An error message or ID. Defaults to the last error that was inspected. verbose Boolean If true, each frame argument in the backtrace will be inspected. Defaults to the value of Debug.showInternalProperties.
-
debug() -
Display a debugging message on the console. Formats its arguments using LzFormatter.formatToString(). May be silenced by setting Debug.messageLevel.
Parameter Name Type Description args [*] Any number of arguments to be formatted according to the control string
-
error() -
Display an error message on the console. Formats its arguments using LzFormatter.formatToString(). May be silenced by setting Debug.messageLevel.
Parameter Name Type Description args [*] Any number of arguments to be formatted according to the control string
-
explainStyleBindings() -
Explain the style bindings of properties on a node For each attribute of the node that has a $style binding, the CSS rules that apply to the node that could affect that binding are displayed. The rules are displayed (with their source) from the most-specific to the least specific, and the style names and values of the rule that apply to this node are displayed. Values that are superceded by more specific rules are displayed in italics.
Parameter Name Type Description node lz.node the node of interest showInherited whether to show inherited bindings
-
format() -
Display formatted output to the debug console. Formats its arguments using LzFormatter.formatToString().
Parameter Name Type Description control String A control string where % indicates the conversion of the corresponding argument args [*] Any number of arguments to be formatted according to the control string
-
info() -
Display an informational message on the console. Formats its arguments using LzFormatter.formatToString(). May be silenced by setting Debug.messageLevel.
Parameter Name Type Description args [*] Any number of arguments to be formatted according to the control string
-
inspect() -
Display the properties of an object on the debug console.
Debug.inspectdisplays each of the properties of its argument object usingDebug.write. Properties that have complex values (or long representations that are abbreviated) are displayed as links. Clicking on the link will invokeDebug.inspecton that object.
-
versionInfo() -
Display version info. Displays various version information about the running application such as the URL it was loaded from, the version of the LPS that is running and the underlying runtime version.
-
warn() -
Display a warning message on the console. Formats its arguments using LzFormatter.formatToString(). May be silenced by setting Debug.messageLevel.
Parameter Name Type Description args [*] Any number of arguments to be formatted according to the control string
-
write() -
Display one or more objects on the debug console. Note: LzDebugService.format() allows more control over displaying multiple objects. Use it instead of Debug.write.
Debug.writedisplays objects on the debug console in an informative format. Simple objects are represented as themselves. Printed Complex objects are represented by their type and a concise description. Long representations (and long Strings) are abbreviated if they are longer than Debug.printLength. Complex objects and abbreviated objects presented as links. Clicking on the link will invoke LzDebugService.inspect() on the object, giving more detail.Parameter Name Type Description any [*] One or more values to display. Multiple values are separated by spaces, so Debug.write("The answer is:", 39+3)will display:The answer is: 42
Events