Debugging JScript in Microsoft Dynamics CRM 2011

So, in the forums, there are a lot of people asking about jscript / javascript problems or how to debug jscript in Microsoft Dynamics CRM 2011.  I probably tell at least two people a week how to do this and  I always point them to a different post that contains this information but it is somewhat buried.  I thought I should separate this into it's own post for clarity.  It's one of the most helpful tools for working with client-side jscript in CRM 2011 or any other version.

Let's take a look at a sample piece of jscript I want to debug.

function parseResponse(responseXML, attributename) {

    debugger;
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async="false";
    xmlDoc.loadXML(responseXML);
    x=xmlDoc.getElementsByTagName("a:KeyValuePairOfstringanyType");
    for (i=0;i<x.length;i++)
   {
      if (x[i].childNodes[0].text == attributename)
      {
         //we decode the base 64 contents and alert the HTML of the Iframe
          alert(x[i].childNodes[1].text);
      }
      
   } 
}

You will notice in the first line of the of the Jscript above I included this miscellaneous line: debugger;

This causes a breakpoint in your code that can be picked up in your code as long as you go in IE to Tools - Internet Options - Advanced and uncheck the two "Disable script debugging" check boxes that are checked by default in IE.

Now, when IE hits the break point it will ask you how you want to debug it. I use Visual Studio 2010 for this debugging, and it stops on my breakpoint and I can use F10 and F11 to step through or step into my code step by step. Then I can add a watch or whatever I want.

Now, if I step into the code in Visual Studio and add my watch I can see all the attributes and, in the context of the jscript snippet above, can clearly see that I can look at the text of the first child node to see my attribute value and I can also drill down into the child nodes and other collections and properties within the structure to determine the syntax I need to unlock the needed values of the other types.

You can see above I am looking at the [0] child node and that the text is "content", you could look at the [1] child node here and see that it contains the value in the text property.

If you have questions feel free to ask questions in the comments.  I am more than willing to help with this kind of thing.

I hope this helps!