Debugging and Tracing

The debug panel and tracing are both enabled in the "Form settings" section of the Forms Designer.

Warning
Enabling the debug panel will return sensitive information to the browser. This includes the values of server-side form helper variables. Tracing will make data visible in the API Server console and log files.

When you've finished working on your form, you must to set both of these properties back to "false". Publishing a form "For Production" automatically disables the panel and tracing.

The Debug Panel

The panel appears beneath each page of your form.

Overview

The overview tab displays information about your form and the versions of various components.

You can see the version of the form runtime and jQuery, and whether jQuery has been loaded from Google or is already present in your site framework.

The form page instance will either be "0" if this is the first time the page has been loaded, or "1" if you have navigated back to a page you've visited previously.

Context Variables

These are variables generated server-side and are available to your server-side functions. They include information about the Forms Service, the current user, and the helper library. These variables shouldn't be used directly. You can access the majority of them using .getSiteVariable

Variables

The variables listed in this tab are those generated as your page loads or created and updated as a user interacts with your form.

Use the "Refresh" button to load the current values.

Field Values

This tab lists all of the current values of all of the fields in your form.

Events

The events tab lists all of the events that have fired since your form loaded.

In the example above you can see the value of a field changing and a circular event being blocked.

Console

The console displays trace information (if enabled) and lets you execute execute JavaScript commands.

Any valid JavaScript expression can be entered into the command field. The runtime helper library is also available. Start typing helper and you'll see a list of all of the available functions, which updates intelligently as you continue typing.

In the example above the value of the field called ONE has been written to the console. Any commands already in the console can be reloaded by double clicking on them.

Tracing

There's more information about tracing in the API Server Console article.

When enabled tracing will record any errors or warnings generated by your form. You can also enable tracing for specific workers, which will output extra information.

The screenshot above shows the API Server console relating to the form used in the debug panel screenshots above. Additional tracing has been enabled for the Forms Service worker.

You can see the requests and responses made to the worker and the End Point error we saw in the debug console tab. Clicking the cog icon beneath the error message would display more information.

helper.trace

The .trace function can be used to write information to either the API Server console or the debug panel. There's also a corresponding Form Function Blocks script block. You can trace almost anything.

Tracing added to fields executed server-side, like the field default functions, will appear in the API Server console. Tracing added to field handlers is executed client-side, so appears in the debug panel while the form is being used.

For example:

helper.trace("info", String("Here's the value of the variable: ") + String(helper.getVariable('myVariable')));

The default trace level is "info" (as in the example above). You can also trace at "warn" and "error" levels.

Or using the visual script editor: