Testing & Debugging

Description

Alpha Anywhere has a number of ways you can debug and test your Javascript code from within the development environment. These debugging methods are available for more than just the UX component. They can be used in Grids, Tabbed UIs, Custom Components, and even .html and .a5w pages.

Javascript Interactive Window

The Interactive Window is like a scratch pad for writing javascript. It can be found on the Interactive Window tab in Javascript Functions. Code written in the Interactive Window is executed when the Run Javascript button is clicked. If there were any errors in your javascript, a popup will appear with a description of the error. If there were no errors and your script doesn't invoke any popup windows (alert(), prompt() or confirm()), nothing will happen. Use one of the native javascript messaging functions, such as alert(), to display any values you want to see in your javascript.

image05.png

The Interactive Window does not have the full context of a web browser, so you do not have access to document or window objects found in a web browser nor do you have access to external javascript sources, placeholder objects, or any other built-in javascript functions and objects in Alpha Anywhere. The Interactive Window is a good place to work out and test simple scripts that don't require external input, such as a text formatting or date parsing script. For more complicated scripts that require the browser, you will need to publish the component to the local webroot and test it in a browser. You can also run your component in Live or Working Preview and use Google Chrome's debugger to assist with debugging and testing javascript.

Chrome Debugger

An embedded version of the Google Chrome browser is used to render Live and Working Preview. Google's Chrome debugger is a great debugging tool for javascript. The Chrome debugger can be used inside Working Preview to debug your component.

Chrome's debugger supports using the debugger; statement to add breakpoints in your scripts. Placing the debugger; statement in your javascript will open the script in the Chrome debugger when the statement is encountered. The first time you run a component in Live or Working Preview, the Chrome debugger may not open when the debugger; statement is encountered. The Chrome debugger needs to be activated first. The Open Chrome Debugger link at the bottom of the Working Preview window will launch the Chrome debugger.

image36.png

Once the Chrome debugger has been opened, it will remain open in the background. Click Reload Page and the Chrome debugger will popup whenever debugger; is encountered. You can also click the Open Chrome Debugger link to bring the Chrome debugger to the foreground.

image38.png

If you are using Working Preview, the Working Preview window can be detached from the designer. When detached, you can make changes to the component in Design mode and see the changes right away in the Working Preview window. The Refresh button will update the Working Preview. You can also turn on auto-refresh. Auto-refresh will immediately update Working Preview when any change is made to the component. If you component has a lot of controls or is complex, however, you may notice a delay while editing with auto-refresh on.

image14.png