Debug your web resources efficiently in Dynamics CRM

Sometimes the most simple stuffs are the most appreciated ones. The same goes about this topic. There is nothing very geeky or some advanced feature of Dynamics CRM that I am going to talk about here. Yet these simple techniques would help a lot in your day to day CRM development.

Here I am going to touch base on very simple ways to efficiently debug you webresources. Developing javascript webresources are very common in every CRM implementation and these techniques will save you lot of time. So before you go ahead, if you already know the power of developer tools that comes with our modern browsers, if you skip this topic.

As I come across multiple projects, I still find developers using the common technique of putting debugger; statement in the javascript code where they want to debug. Let’s find out the steps to enable debugging in a method using the traditional way.

  • Put the debugger statement where you would possibly want to debug
  • Publish the webresource in CRM
  • Open the Tools –Internet Option in IE Properties and then uncheck the checkbox – ‘Disable Script debugging’.
  • Relaunch the page and then the browser will prompt to choose the debugging engine
  • The developer selects visual studio instance (existing or new) and then all the associated scripts are loaded and then debugging continues.

The above procedure had multiple problems and the most common I faced is that Visual Studio hanged after sometime or IE restarted every now and then you are just drawn out of the flow where you were just about to decode your issue. Also many a times developers ended checking in the code in TFS missing out on commenting or removing all the debugger lines in the code and this code makes it to production.

Well you needed to do all this till sometime back. But why not leverage the wonderful Developer tools that comes with each browser now a days. Not only you can debug your webresources most efficiently but also can do a host of other things. So let’s explore it together.

I created a webresource here named ‘account.js’ and upload it in CRM.

image

The webresource is pretty simple. It contains a method ‘account_load’ from where the displayAlert function is called which displays the alert. The account_load method would be configured to be called from the form onload.

function account_load() {
    this.displayAlert();
}

function displayAlert()
{
    Xrm.Utility.alertDialog("Inside alert statement");
}

Now when you do open the account record, you would see the alert. So let’s say you are getting an error during the form on-load. Now let’s see how can you use developer tools to debug this.

While the record is open, press F12. I am using chrome here but you can use even IE and Mozilla.

The developer tools open. You can find you script from the left hand pane.

image

You have the entire javascript for your view here. Now on the line number in the code window just click where you need to the debugger. And you are done. Check for the screenshot below.

image

Now just refresh the record pressing F5 and then next time the debugger will stop at that position.

image

You can now press F10 to F11 to debug as you want or press on the arrow highlighted in the above screenshot to pass through the entire script. Wonderful isn’t it? No more putting debugger statements in the code.

Now say you want to find how your code executed and whether your code entered a particular execution block or not. The most popular way all this time has been using the window.alert method to identify the same. However after you go through what I will show you here now, I bet you will no longer need the alert methods.

You can now use the console.log methods to determine your code execution path. Just check for the code below.

function account_load() {
    console.log("entering form load.")
    this.displayAlert();
}

function displayAlert()
{
    console.log("inside display alert.");
    //Xrm.Utility.alertDialog("Inside alert statement");
}

Publish the webresource and simply open a new account record. However Once the record loads successfully, press F12. Once the developer tools load, just navigate to the console tab. All the messages that you wrote in the code through the console.log statements are displayed here.

image

As you can see, all the messages are displayed in the console. No longer annoying alerts and everytime clicking on that to get rid of it.

Thinking that’s all the developer tools brings to you. Off course not! If you are keen on exploring the Xrm Library and does not really want to mug up all the methods just like me, well you are in for a treat here.

Open a CRM record and open the developer tools. Go to the console and select the appropriate  frame. This is a very necessary step. Check for the screenshot below.

image

Normally it is main.aspx or page.aspx.

Now just type Xrm and you get the entire intellisense of your Xrm Scripts at your disposal.

image

Believe me, you can leverage this to test any code for your Xrm scripts. If you ask me, I first test my entire code in the console and then make changes in the webresource all at once without going through the grind of making a small change and publishing every time to check if it is working.

Hope this helps and saves you some time while you develop your webresources next time.

Advertisements

Author: Debajit

I am a Dynamics CRM Most Valuable Professional (MVP) with 10 years of experience in Microsoft .NET Technologies and 7 years of dedicated experience in Microsoft Dynamics CRM. I have worked with companies like Microsoft, SanDisk, PwC, TMF Group and have extensive experience of implementing complex CRM solutions from both offshore and client side. Currently the face of XrmForYou.com with significant experience in delivering corporate training on Dynamics CRM and have already delivered multiple projects to client through XrmForYou.com Author of multiple tools on codeplex including the 'Role Based Views' and 'CRM-Sharepoint Metadata manager & Attachment Extractor' which are available for commercial use under XrmForYou.com For consulting/ training, drop me a note at info@xrmforyou.com or visit our website www.xrmforyou.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s