Start love your client side dev using Fiddler

Benedikt Bergman wrote a far better article than this one and I would recommend checking out his instead: https://benediktbergmann.eu/2021/01/21/use-fiddler-to-serve-a-local-version-of-webresources/

With this article I want to show my fellow developers how to love Fiddler. Sadly I had to read on twitter that developers struggle with getting Fiddler to work. We were arguing about source maps and if you add them to your solution or not.

Fiddler is a tool that I rarely use for client side dev work. Not saying that I shouldn't. Every time I've tried to set it up for client side dev (OK, so maybe it was twice) I couldn't get it to work and so moved on to other things.
— Daryl LaBar (@ddlabar) November 23, 2020

Requirements

Fiddler 4 – No prior knowledge required
VSCode
Nodejs
Typescript

When downloading Fiddler make sure to not download “Fiddler everywhere”. Also they ask for your E-Mail and a area for what you will use Fiddler.

Setting up Fiddler

So setting up Fiddler is not to straight forward when it comes to Dynamics CRM. The key point is to decrypt HTTPS communication. So at your first start it might look like this:

On the left side you can see all HTTP communication. On the right there is a lot of handy tools, but most of the time I only use the Inspectors and the AutoResponder.

First we need to configure Fiddler to decrypt all HTTP traffic. There for go to “Tools” -> “Options”

Select the “HTTPS” tab and check “Capure HTTPS CONNECTs” as well as “Decrypt HTTPS traffic”. It should look like this:

Fiddler will ask you to install certificates, simply agree to everything. What could you possible lose, eh? 😉

Restart Fiddler and the traffic area should be crazy when you have a couple of tabs open. If Fiddler still does not decrypt all HTTPS traffic you might want to hit the “Actions” and trust the certificate again or restart Fiddler.

Setting up a local dev server

If you are not using webpack (maybe you should start using webpack?) you might have to skip this part and look for another local dev server. If you however use webpack you can easily use the webpack-dev-server package.

Install with

npm install webpack-dev-server --save-dev

Add a serve script to your package.json

{
  "name": "webresources",
  "version": "1.0.0",
  "scripts": {
    "serve": "webpack-dev-server --no-inline",
  },
  "devDependencies": {
    "@types/webpack-env": "^1.13.9",
    "@types/xrm": "^9.0.31",
    "ts-loader": "^6.0.3",
    "typescript": "^3.5.2",
    "webpack": "^4.34.0",
    "webpack-dev-server": "^3.11.0"
  }
}

In you webpack (webpack 4!) config add the following part

const path = require('path');

module.exports = {
  //...
  devServer: {
    publicPath: '/',
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
    },
  },
  //...
};

In this example package.json you can see the serve script. Now if you run

npm run serve

the local webserver will start. It will serve all your build files if requested via HTTP. It also has “recompile on save” so when you change your code it instantly recompiles.

Configure the AutoResponder

In the AutoResponder tab in Fiddler you first need to check the “Enable rules” checkbox and I would recommend to also check “Unmachted requests passthrough” so you can continue using your browser for reading my tweets 😉

Add a new rule and insert the following in the first input

regex:(.+\/webresources\/new_\/(.*\/)?([\w]+)\.js)

and replace the “new_” with your projects prefix.

http://localhost:8080/$3.js

in the second one. 8080 is the standard port for webpack dev server. Other local servers might use different ports. If you run multiple instances it might also be 8081, 8082 and so on.

The first input is the rule that Fiddler will apply to every request. If the a request passes this test it will do the action in the second input. In our case redirect the request to our local webserver. You can extend those rules to also support source maps 😉

Before you test it out make sure your rule is active (checked). Also since browsers heavily cache these days make sure you open your browsers dev tools and disable caching. Chrome for example does not request cached files therefor fiddler can’t even try 🙁