Thu, 02/11/2021 - 14:47 By Stéphan Drouard
Debugging D365 JS web resource with Fiddler

Debugging D365 JS web resource with Fiddler

Debugging your web-resource using Fiddler

When creating a new web-resource for example (have a look to this other chronicle), it could be time consuming to deploy and redeploy it again and again.

Using Fiddler, we can test our web-resource directly with your local version, without deploying anything. We're going to test that for web-resources in Dynamics 365 but you clearly can use this tricks for any file of any front-end language you are working on.

Let's take an example with the previously created web-resource.

Instead of displaying the firstname, we would like to display both firstname and lastname but we want to test it locally before deploying.

Prerequisites

First you will need to install the following:

Setup Fiddler

After installing Fiddler, open it.

Go to Tools -> Options

In the HTTPS tab, tick the checkbox Decrypt HTTPS traffic

Debugging D365 JS web resource with Fiddler

Then click on Yes to trust the Fiddler Root certificate. It allows Fiddler to intercept HTTPS traffic between your browser and the server.

Debugging D365 JS web resource with Fiddler

Click on Ok to close the options.

Go to Rules -> Performance -> Disable Caching

Debugging D365 JS web resource with Fiddler

This will ensure that there is no cache and so that it always be the last version of your local file that will be executed. In theory, this should be enough. However, I had to refresh once the cache of my browser manually.

Then we will add a rule to replace the js file on CRM by your local js file.

To do so, go to the tab AutoResponder,  and tick the checkboxes Enable rules and Unmatched requests passthrough 

Debugging D365 JS web resource with Fiddler

Then click on Add rule

Debugging D365 JS web resource with Fiddler

The first textbox will contain the pattern to identify which HTTPS calls need to be replaced. In our case, I put the name of the web-resource I created in the previous part.

/webresources/new_myTypeScriptMethod

Then on the second textbox, you write the path to your local file. I put the js file located in the dist folder of our solution.

Do not forget to Save.

Now when reloading your CRM in your favourite browser, Fiddler will intercept the js call and change it by calling your local file. Let's have a try.

Enjoy the development !

Let's open our typescript project and modify the code like this:

class MyForm {
    static OnLoad(executionContext: any) {
        const formContext = executionContext.getFormContext();

        let attrContactFirstname: Xrm.Attributes.StringAttribute;
        attrContactFirstname = formContext.getAttribute('firstname').getValue();

        let attrContactLastname: Xrm.Attributes.StringAttribute;
        attrContactLastname = formContext.getAttribute('lastname').getValue();

        formContext.ui.setFormNotification("My Typescript is now loaded!: this is the fullname: " + attrContactFirstname + " " + attrContactLastname, "INFO", "ts-msg");
    }
}

Transcompile your ts file using the command prompt:

tsc

As your js file should have been generated, you can now reload your CRM page.

Debugging D365 JS web resource with Fiddler

Fiddler intercepted the call and replace it with your newly generated file !

As you can guess, not to have to redeploy your web-resource is a huge gain of time for developer !

Debugging D365 JS web resource with Fiddler

Add new comment

Image CAPTCHA
Enter the characters shown in the image.