An easy way to debug client-side code

On a recent project CRM 4.0), I was asked to revise the default behaviour of the "Convert Activity... To Case" option on the E-mail form. The client did not want the modal dialog box to appear (the one prompting for the Customer and Subject) and wanted instead to set default values in code. The business purpose for the change was to increase productivity and avoid incorrect data-entry by their 20+ users, who use that feature several times each day.

Below is a step-by-step process for making this change.

Note: Since this example requires a change to a core CRM js file, Microsoft considers this an "unsupported" customization.

In order to debug the "To Case" command (outlined below) I loaded my favorite IE browser add-in development tool... IE WebDeveloper. (See my previous blogs about this product.)

Using IE WebDeveloper, I was able to determine that the To Case menu option calls the function convertToCase with a parameter of 4202.

The screenshot below shows the "To Case" menu option (in the HTML DOM) highlighted on the left and the JScript function outlined on the right.

To start debugging the convertToCase(4202) function call, I used the Run Scripts feature of IE WebDeveloper to execute the JScript debugger statement along with the function, as shown below:

After clicking Run, I started debugging with Visual Studio 2008.

Since the script is running in the context of the current CRM web page, I was then able to step into the convertToCase function, which it turns out resides in \inetpub\wwwroot\_static\Activities\Activity.js.

Finally, I revised convertToCase (removed the code that opened the modal window) to my liking and debugged through the code a few more times to make sure my customization worked as planned.

The coolest part of using IE WebDeveloper to help out with this customization is not needing to place the debugger statement inside a script file -- I was able to start debugging immediately within the current page. This same technique can be used to fire onLoad, onChange, or any other window/document/element event. For example, to fire onLoad you can run this in the IE WebDeveloper:

debugger;

crmForm_window_onload0();

Again, this lets you step through the onLoad script of any form without the need to place a debugger statement in the form code.

As another example, assume you want to fire the onClick message for a custom button added via ISV.Config and debug into the JScript that CRM constructs. Run this code in the IE WebDeveloper script window to start a debug session in Visual Studio:

var customButton = document.getElementById("ISV_New_4_GPInvoiceLookup").childNodes.item(0).childNodes.item(0).childNodes.item(1);

var evt = document.createEventObject();

debugger;

customButton.fireEvent("onclick", evt);