Spry Debugger Sample

The Spry Debugger feature allows users to debug Spry code in all browsers. Because of varying support for debuggers on different browsers, we have worked on our own JavaScript debugger that is independent of the browser. The Spry Debugger is under development and we know that are some bugs and the interface can be improved, but as it stands, it may be a helpful tool for getting insight into your page.

To use the debugger on your page, you need to get two files: 'SpryDebug.js' and 'SpryDebug.css' and include them in the head of the page. Once these files have been added to the page, and you load the page in browser, the Spry Debugger window will be displayed. The Spry Debugger window will appear over all elements from your page. If you want to change the window position, drag and drop it anywhere on the page using the blue bar at the top.

Using the Debugger

The Spry Debugger allows you to inspect the HTML elements from page, giving a snapshot of all current element properties.
A way to inspect the HTML elements is to use the mouse to simply cllck on them. This behavior is enabled by:

1. Click the left-most button on the Spry Debugger window header. Then, when mouse moves over html elements, a red border will highlight the current element.
2. Click on the element to get the list of properties and their values into Spry Debugger window.

After the element is selected, the mouse introspection stops. To make a new introspection, repeat these steps again.

The Spry Debugger window will list all the properties for the HTML element. All the variables names are listed in the left column in the Spry Debugger window . In the right column are listed their corresponding values. The last row from the bottom contains all the available javascript functions for the given html element.
The label in red color displays the list of css properties with their values at runtime. The blue link like values represents Java Script objects. Their details can be shown/hidden by clicking on the link.

Real Time Debugging

The Spry Debugger window also provides a line console for real time debugging. For example, the debugger line console from the Spry Debugger window can be used to inspect current values of JavaScript variables. You can type the variable name and then hit enter to get all the information about it. There is also basic code completion for the javascript variables on the page. For example, if you type: "document." into the debugger line console, and then press "Tab" key, all related variables and functions are suggested.
You can debug the code in real time by calling the 'debug.log' JavaScript function directly in the page. This function accepts as parameters, one to many comma separated strings or variables . Each argument will be listed on the Spry Debugger window in detail.

The debug.log() call can be used to trace the code execution using simple strings as parameter.

When page loads, the Spry Debugger window is displayed. No variable/property are listed by default.

You can also use the debugger console line to introspect your page. Type the variable name into the debugger console line and hit enter to get the information about the element.

The Spry Debugger window will list all the properties for the html element.

• On the left column in the Spry Debugger window are listed all the variables names
• On the right column are listed their corresponding values
• The last row from the bottom contains all the available javascript functions for the current html element
• The label in red color displays the list of css properties with their values at runtime.
• The blue link like values represents Java Script objects.
  Their details can be visualized/hidden by clicking on the link.

Click me to get my properties

Click the image to get its properties.

Click me to get my properties

My image:

Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.