Exercise 2: Deploying and debugging an Excel Services ECMAScript

In this exercise we will be going over a couple different options to effectively debug your ECMAScript at runtime. This will help you diagnose issues at the source.

Task 1 – Using Internet Explorer 8 for Debugging

In this task we will be taking a look at the IE 8 developer tools that can come in handy when debugging ECMAScript on the fly.

1. Press F12 to open up the Developer Tools window in IE.
2. Click on the Script tab and use search script search bar to locate the ECMAScript we loaded in Exercise 1 (FabriKamReporting.js). Input ‘writelog’ into search bar and execute.

3. Find the following line of code within onSelectionChange() and set a breakpoint by clicking on the line number.

   writelog('onSelectionChange Address:' + rangeArgs.getRange().getAddressA1());

4. Click on the Breakpoints tab below the Search Script search bar and you should see the breakpoint that you just set.
5. Once you have your breakpoint set, click the Start Debugging button at the top. Click OK if prompted to Refresh Webpage.
6. Go back to the IE window and click on cell B2 in Sheet1 to trigger the event and hit the breakpoint.

7. Go back to the Developer Tools window and click the Locals tab below the Search Script search bar.

   Figure 5

   Locals tab

   1. Expand rangeArgs
   2. Expand $1x_0
   3. Verify the value next to $RF_0 is “’Sheet1’!B2” (the cell you clicked on in step 5).
8. Press the Continue button (little green button to the left of the Stop Debugging button) or F5 to resume execution.
9. Go back to the Developer Tools Window and stop debugging by clicking Stop Debugging at the top or close the DeveloperTools window.

Task 2 – Using a “Logging” Mechanism for Debugging

In this task you will take a look at another method you can use to debug our ECMAScript. This method involves creating functionality within the script itself to relay information about program flow. If you noticed before in FabriKamReporting.js we had a function called writelog() that output information to a Content Editor web part to as events occurred. We can use this function in the same manner across the script to verify the functionality.

1. Go back to Visual Studio and add the following lines of code to FabriKamReporting.js:

   1. At the beginning of function Page_Load() :

      writelog("Page_Load called"); writelog("Ewa object: " + Ewa);

   2. At the beginning of function GetEwa():

      writelog("GetEwa called");

   1. Save changes to FabriKamReporting.js
   2. Upload FabriKamReporting.js (making sure to overwrite the original).
   3. Load the web part page EwaTest.aspx we created in Exercise 1
   4. Look at the Content Editor section and verify the following result:
      1. GetEwa called - This shows you that the funtion GetEwa() was called.
      2. Ewa object: [object Object] - This is verifying that the Ewa object is valid. If the object was invalid, the result would be undefined, null, or nothing would be returned.

      3. Page_Load called - This shows you that the function Page_Load() was called.

         Figure 6

         Content Editor