Mapping network resources to local files using Fiddler

In web development, it is sometimes useful to alter files locally on the client (browser) side and test their behavior.

For example, let’s say I’m the developer of Microsoft.com and I want to test mobile compatibility. One of the scripts participating in this mechanism, at the time of writing, is apparently https://www.microsoft.com/global/en-us/home/renderingAssets/wt_capi.js.

Now, say I want to make some changes to this file and test them out, but I want to make them locally on my computer. Maybe I don’t have access to the server right now. Maybe I don’t have a convenient testing environment. Maybe I want to test my changes on the production environment without affecting everyone.

Whatever the reason may be, Fiddler makes the process very simple.

1. In the right pane, click the AutoResponder tab and check Enable automatic responses and Unmatched requests pass through
2. Find the network resource you wish to replace in the Web Sessions list (in our case, https://www.microsoft.com/global/en-us/home/renderingAssets/wt_capi.js)  and drag it to the AutoResponder rule
3. Make sure the newly created rule is selected and in the Rule Editor at the bottom write the path of the local file you want to respond with, for example C:\wt_capi.js (you can also click the drop-down arrow and select Find a file)
4. Click Save in the bottom right corner.

All done. Whenever the browser asks for https://www.microsoft.com/global/en-us/home/renderingAssets/wt_capi.js, Fiddler will intercept that request and respond with C:\wt_capi.js (Fiddler will indicate this by highlighting the corresponding session in the Web Sessions list).

HTTPS

In order for the above to work with HTTPS, Fiddler’s certificate must be installed. This is highly not recommended to do on any machine in which you care about security, and ideally should only be done in a dedicated test-only VM. See the following article for instructions:

https://fiddler2.com/documentation/Configure-Fiddler/Tasks/DecryptHTTPS

Note that FireFox requires special handling:

https://fiddler2.com/blog/blog/2013/04/01/configuring-firefox-for-fiddler

For further information on Fiddler’s AutoResponder see:

https://fiddler2.com/documentation/KnowledgeBase/AutoResponder

A note on Chrome

Mapping is also supported in Chrome both natively and via extensions:

1. Dev tools workspaces
2. Tincr (extension)
3. Devtools Autosave (extension)

However, I was not able to get any of the above to work as reliably as Fiddler.