Debugging JavaScript Libraries

JavaScript can fail in several ways.  Poor logic, evolving CRM organization structure, system updates, and simple user error can all cause functions to fail.  Unfortunately, not all failures produce error messages and simply fail to operate as expected.  When this happens, it may be necessary to use more investigative methods to resolve the issue.  The following scenario will show you how to use Internet Explorer’s built in debugging tools to investigate and resolve an error on CRM’s Account form.

Scenario: Joe CRM has a JavaScript library that contains two functions that don’t appear to be working as designed.  The function named OnSave is attached to the OnSave event of the form and IsAccountNameValid is attached to the OnChange event of the Account’s Name field.  When a user changes the value in the Name field IsAccountNameValid checks the entered value and displays an error message if it is not valid.  When the user saves the form the OnSave function calls IsAccountNameValid to ensure that the name is valid.  If it is not, the save operation will be aborted.

Users are not seeing any error message to alert them that the account name is invalid.  Joe was unable to determine the problem at first glance and needs to debug the library.  Here are the functions.

java8

Tip! Refer to the MSDN developer network for more details on Internet Explorer’s Developer Tool.

Here’s how Joe resolves the problem:

  1. Joe navigates to the account form in CRM and presses F12 to open the Developer Tools window.
  2. He then navigates to the Script tab

java9

3. To select a library to debug, Joe clicks the View Sources button and selects the appropriate library from the list.

java10

This should bring up the appropriate library for inspection.  To begin debugging Joe needs to click on the far left of the line he wishes to begin debugging to insert a breakpoint.  Placing the cursor on the desired line and pressing F9 will also place a breakpoint.  Next he should click the Start Debugging button.  A popup may prompt you to reload the form at this point.  Select the option to leave the current form and allow the form to reload.

java11

4. Now Joe triggers the function by entering an invalid value in the Name field.  Line 13 of the library is the check condition for the value.  If the Name field exists on the form and the value is less than 3 characters the message box should show.

java12

Joe enters ‘ab’ into the field and the presses Tab to trigger the function.  When the form reaches the breakpoint assigned on line 8 Joe will be able to use the debugger to inspect the logic.

java13

5. Pressing F10 or clicking the Step Over button will move the Joe through the logic

java14

After stepping through the function several times Joe realizes that lines 11 -15 are never getting triggered.  The if condition on line 10 makes sure that the accountName field exists on the form.  By hovering the mouse over the accountName variable Joe can see that the getAttribute() function is not finding the name field.  Upon inspecting the field name specified in getAttribute() he sees that an ‘s’ is included in the name.  The correct name of the attribute is ‘name’.

java15

6. After modifying the logic in the library, publishing the change, and reloading the account form the issue is resolved.

java16

As you can see, Internet Explorer’s built in tools can be invaluable when isolating issues within JavaScript libraries.  Many web browsers include similar tools or plugins that will allow you to debug libraries as well.  To utilize this functionality your CRM organization will need UR12 or later updates installed to activate cross-browser use.

Visual Studio can also be used to debug libraries.  For instructions on how to do this review the following articles:



Return to Top ▲Return to Top ▲