A lot of developers that are introduced to JavaScript development in Dynamics 365 have the same first, quite negative reaction:

  • They find it a slow process (upload, publish, Ctrl + F5).
  • It’s too time consuming.
  • It’s hard to debug.
  •  …

Indeed when working on bigger JavaScript customizations in CRM, repeatedly re-uploading and publishing your Web Resources can be a quite time-consuming task. Especially because, well let’s face it, we never get it right the first try.

Think about it, how many times have you republished a Web Resource just to find out you made a typo and need to re-upload and publish your Web Resource? Sounds familiar, right?

Luckily there’s a nice workaround to this using Fiddler. I’ll show you how to speed up your Dynamics 365 JavaScript development, but before explaining how to do this I’d like to emphasize that this is nothing new. This ‘trick’ has been around since CRM 2011 and has been discussed in various blogs like http://mscrm-njl.blogspot.be/2013/06/how-to-use-fiddler-to-debug-crm-2011.html and http://www.sparklexrm.com/s/Tutorials/SetUpNewProject.html but I feel it is still not enough used by developers.

Let’s speed it up!

So here’s the step by step guide:

  1. Open up Fiddler
  2. Under the Filters tab, add a filter to only show the requests for Web Resources you want to work on. You can do this by using the field “Show only if URL contains”, and type for example “/WebResources/” or “thr_demoscript.js”. This is not a required step, but it does come in handy to filter out all the annoying requests which aren’t of use to us anyway.

    Speed up your Dynamics 365 JavaScript development with Fiddler

    (Click on the image to enlarge)

  3. Perform the actions that invoke your custom script. In my cases I open the Lead Form to invoke the OnLoad function since this is were I registered the script.
  4. You should see the request towards your Web Resource in Fiddler now. If it doesn’t appear, hit Ctrl + F5.
    Fiddler - Find request
  5. Select the request and drag it onto the AutoResponder tab.
  6. Select the newly added rule and change the following in the Rule Editor:
    • Replace “EXACT:https://….” with “REGEX:.*nameofyourwebresource.*” (without the quotes). This will redirect any url that contains the name of your Web Resource to the specified file.
    • Replace “*200-SESSION…” with the path to your file (PRO TIP: you can click on the picklist and choose Find File to select the file).
    • Hit the Save button.

    Fiddler - Rule editor

  7. That’s all! As long as your Fiddler is active, all requests matching the rule defined above will now be redirected to your local JavaScript file.

Not only Dynamics 365 JavaScript development

The approach can also be used for debugging issues with WCF services and so on.

I really, really like this approach. Not only does it significantly speed up development, it also makes sure other developers are not blocked by your doings. Because you are working on a local file, and only you get redirected through your Fiddler rules, you’re 100% sure you are not interfering with anyone or giving them a hard time with all your publishes.