Debug your web resources efficiently in Dynamics CRM - Debajit's Power Apps & Dynamics 365 Blog

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.

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.

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.

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

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.

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.

Normally it is main.aspx or page.aspx.

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

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.