Debugging

As with all development, there are going to be times when the application doesn’t work in the expected manner. There are two main ways of debugging Skylight Applications on the client to see what’s going under the hood to rapidly resolve any challenges – using logs and using the debugger.

While it is possible to debug on smart glasses and mobile devices, it is recommended to debug using the Skylight web client for both of these methods.

console.log();

To debug using logs, we’ll take advantage of JavaScript’s console log. Placing console.log("<log message>"); calls into the client-side scripts will log to the developer console, which can be accessed using developer tools in most web browsers in the Skylight Web client.

Other built-in logging methods like console.error and console.warn can also be used, if necessary.

Here is an example of what this looks like in the script and the result in Chrome’s developer tools console:

debugger;

The second method of debugging allows for stepping through the code line-by-line to investigate objects in a more flexible manner. To do this, simply add the line debugger; to the script in question. If the developer tools console is opened, this causes the browser to pause execution on that line and show the source of the code currently being executed. Debugging methods and tools provided by the browser will now be available, such as hovering variables to see their values.

Here is an example of what this might look like in the script and then what it will look like when viewing the application:

Example of Chrome developer tools stopping on debugger; when a card is clicked.