Debugging Tips for CRM 2011

Nathan Eccles, 08 November 2011

Anyone that has had any experience coding will tell you that actually writing the code is only half the work. Debugging code can waste a significant amount of a developer’s time, and it can be quite difficult to know where to start and how to go about it. In this blog post I will touch on some of the easier ways to identify bugs, and work to remedy them.

Below is some code that I have written which is meant to alter the colour of contact fields based on preferred contact methods. I have intentionally added bugs to show how I would go about identifying and fixing them.

function formatContactFields(fieldsToFormat, booleanOptions) {
    var emailDecider;
    for (var i = 0; i < booleanOptions.length; i++) {
        var booleanAttribute = Xrm.Page.getAttribute(booleanOptions[i]);
        var booleanValue = booleanAttribute.getValue();
        var fieldText = document.getElementById(booleanOptions[i] + "_c").innerText;
        if (fieldText == "E-mail" ) {
            emailDecider = booleanValue;
        }
        if (fieldText == "Bulk E-mail" ) {
            booleanValue = booleanValue || emailDecider;
        }
        if  (booleanValue) {
            getFieldsToFormatField(fieldText, fieldsToFormat, "red" );
        } else {
            getFieldsToFormatField(fieldText, fieldsToFormat, "green" );
        }
    }
} 

function getFieldsToFormatField(fieldName, fieldsToFormat, colour) {
    switch (fieldName) {
        case "E-mail":
        case "Bulk E-mail":
            document.getElementById(fieldsToFormat[4] + "_c".style.color = colour;
            break;
        case "Phone":
            document.getElementById(fieldsToFormat[0] + "_c" ).style.color = colour;
            document.getElementById(fieldsToFormat[1] + "_c" ).style.color = colour;
            document.getElementById(fieldsToFormat[2] + "_c" ).style.color = colour;
            break;
        case "Fax":
            document.getElementById(fieldsToFormat[3] + "_c").style.color = colour;
            break;
        default:
            break;
    }
} 

As I attempt to run the above code I immediately run into unhelpful error messages like the one below.

This message is all too common when writing CRM code and it’s particularly unhelpful as it doesn’t give any clues as to what is actually wrong with your code.

This most common reason for this error is that you have missed braces somewhere in your code. If you’re coding in Visual Studios, which I strongly recommend you do, there are a few handy shortcuts we can use to identify where we are missing our braces.

Clicking inside a pair of ( ) or { } bracers and pressing CTRL + ] will take you to the end of that set of braces. Pressing CTRL + SHIFT + ] will highlight all code inside that set of bracers.

Using this we can quickly identify where we have missed our brace.

After this the code is easy to debug as the built in CRM alerts tell you what’s wrong. “Error: ’fieldtext’ is undefined.” “Error: ‘fieldsToFormat’ is undefined.”

After this however it starts getting a little trickier giving you the same error message for ‘green’.  In this case a little logical thinking will get you to the conclusion that green and red are not variables, and therefore should have quote marks around them.

Your code is no longer presenting any errors, but it’s still not working properly as E-mail is not having its colour changed as it should. From here the CRM alerts stop, and you’re on your own trying to work out what’s gone wrong. This is where things start getting a little trickier!

You have two options; you can either litter your code with alerts to see the values of everything and ensure they are what you think they should be, or you can put a debugger into your code and step it through in Visual Studios.

To use the debugger you simply need to add the line debugger; at the start of your code. Then to enable Internet Explorer to allow debugging, jump into Internet Options > Advanced > Under the Browsing section uncheck Disable script debugging (Internet Explorer).

Once you have identified that “E-Mail” should be “E-mail” you can remove your alerts or debugger.

Now we have working code which we can properly implement to present the following: