SAP Analytics Cloud, Analytics Designer Feature of the Day: In Browser Script Debugging

In my freshman year as an undergraduate student, back in the prehistoric year of 1989, we dodged dinosaurs on the way to Programming 101 class.  Oh and we used vi to write Fortran code.  The debugging experience was writing print statements.  It was painful and slow.  Those of you familiar with older generation analytics application design tools from SAP might be familiar with this.  You might be able to write scripts, but you can’t step through your scripts and examine variable values.  The “debugging” experience was straight out of the 1980’s.  This was largely due to the “run scripts close to the data” philosophy of those tools, which made in-browser debugging impractical.  Analytics Designer runs its scripts as normal in-browser JavaScript.  That means you can debug them in Chrome!

Let’s start in an app with a script that we’d like to debug.  For our example here, we’ll use a dropdown widget, called Dropdown_1.

Since we’ll be debugging at runtime, we can go ahead and run it.  To open Chrome’s developer tools, press F12 if you are on Windows and Command-Option-I if you are on a Mac.  Select the Sources tab, to look at running JavaScript code.

There are two ways to find the script that you want to work on.  The first is to find the .js file directly.  Look in sandbox..worker.main.xxx (xxx is a generated UUID).  There you will find the application and all of the currently available scripts.  Note that scripts are only available in the browser, once they have been run the first time.  You can see here that the application onInitialization() event and the onResultChanged() for a pair of widgets have run.  Additionally, I have already selected the dropdown, so that its onSelect() event script is in the browser.

The second way to find the script is to search for it.  Select the top of the app, right click and select Search in all Files.

Down in the search bar, type in the name of the widget.  The script will show up in the search list.

Select it and you have access to it in the browser.  Note that it does not look excatly like in the editor.  Blank lines and comments have been stripped out and the script has been nested inside boilerplate.  You can still follow your code easily enough.  Set a breakpoint and re-run the event.  Have fun debugging!