Debug Your Scripts
To find errors in your scripts, you can use the web browser’s developer tools to set breakpoints for debugging or use the analytics designer debug mode.
Find Your Scripts in Web Browser's Development Tools
Before you start debugging your scripts, learn how to find and view them in the developer tools of the web browser, Google Chrome.
To find scripts in the web browser's developer tools, you need to run the script at least once during the current session.
Before your scripts get executed at runtime, analytics designer transforms them. This is why the JavaScript in the web browser's developer tools doesn't look exactly the same as the scripts you wrote in the script editor during design time.
To view the scripts you wrote in your analytic application, just run the application and press F12, which opens the web browser's developer tools.
Then to search for scripts by name, press Ctrl + P to open the search field, and enter the name.
The names of the scripts follow a specific pattern: <WIDGET_NAME>.<FUNCTION_NAME>.js. The scripts are grouped in a folder named <APPLICATION_NAME>.
| Component of Script Name | Description |
|---|---|
| APPLICATION_NAME | the name that you set for your application when you saved it |
| WIDGET_NAME | the name of the widget/element in your application |
| FUNCTION_NAME | the name of the function/event handler that holds the script you wrote |
If you defined scripts for the onInitialization event of your application, the WIDGET_NAME will be Application.
Special characters in your application name will be replaced by _, except - and ., which will be kept as they are.
Let's assume you have an application called My Demo Application, which contains a button Button_1 with an onClick event handler. The name of the script would be Button_1.onClick.js and it would be located in a folder called My_Demo_Application.
You can also find scripts by using the file tree on the left side of the developer tools. Select the Sources tab. On the top level of the file tree, search for the entry that starts with sandbox.worker.main. Under AnalyticApplication, you'll find the folder with your application's name where there're all the scripts that you've already executed in your current application.
Set Breakpoints in Your Scripts
You can set breakpoints at certain points in your scripts to pause and check any errors.
Open the scripts you want to pause during its execution, and to the left of the opened scripts in the developer tools, select the number of the line where you want to pause.
A blue marker indicates that the scripts will be paused here the next time they're executed.
You can add more breakpoints in the same scripts to pause at different points during runtime.
To reset a breakpoint, just select the marker you want to remove, and the scripts won't be stopped at this point.
Use Analytics Designer Debug Mode
You can launch the analytics designer debug mode and use debugger; statements in your scripts, which lets your scripts automatically pause at certain points during runtime.
To launch the debug mode, add the URL parameter debug=true to your analytic application.
A valid URL of an analytic application at runtime with debug mode enabled looks like this: http://<HOST>:<PORT>/sap/fpa/ui/app.html?tenant=<TENANT_NAME>#;mode=present;view_id=appBuilding;appId=<APPLICATION_ID>;debug=true
If the debug parameter receives a different value from true or no value at all, it's ignored and the debug mode is not enabled.
The names of the scripts are generated differently when the analytic application runs in debug mode. In debug mode, all script names receive the suffix -dbg. For example: Button_1.onClick-dbg.js
At design time you can add the debugger; statements to your scripts instead of setting breakpoints at runtime.
When you run your analytic application in debug mode, the script will automatically stop its execution at the debugger; statement.
This lets you mark the points to be possibly revised at design time and automatically paused at runtime.
In debug mode, your script comments are generated into the transformed JavaScript. This helps you recognize your scripts in the web browser's developer tools.