Fiddler – The missing string of Web Development (Adv) – Part II

This is the 2nd post of the 3-part-series on using Fiddler. Please visit the First, and Third post for more insight

If your files are coming from a constant URL, it is easy to set auto-responder using the EXACT:

But if your files are served from CDN e.g. Akamai or Cloudfront, your requests may hit sub-domains and your autoresponder URL may not match every time.

Let’s see how autoresponder can be configured if we’re working in such a complicated environment i.e. while serving contents from a CDN.

Replacing files coming from CDN (on http)

For :
The Auto-responder regex is: 

Recently I was working in a products listing where we’ll be showing a set of sliders containing branded products. On day 1, my targeted JS file was coming from the CDN with the url while on day 2, it had became

This regex based auto responded came to rescue.

Note: While it serves the purpose with HTTP CDNs, it may not work (at least it din’t work in my case) for HTTPS.

In DEV environment we had very few products. So testing on this smaller set was not going to help if our larger audience is expected to see something else. Plus who knows what will break in production after our changes to static files.

Fiddler is best in these situations when you’ve to test your code in Production Environment even without deploying it to production.

But production code is minified and obfuscated .
Right, you’ve to do a bit of work for this.

First copy the source & prettify it using your browsers built-in prettifier. I use for the flexibility it gives. Despite this, the code will still be hard to read, as the variable names will be shortened. But, still it’s better to go with this rather than replacing your Dev code where things might still be broken.

Second, copy the entire source and save it to your disk and name it properly so that you don’t get confused the next day as you see many files with similar names. You can choose your own convention as long as you do not get confused.

You can add versioning to them too e.g. init a git repo in the folder. It’ll give you better control on changes too.

For file-name.js (say), I’d use following the convention:


Lastly, you can compare the DEV  code and the deobfuscated code (that you set as Fiddler’s Autoresponse) using any text comparison tool e.g. Win Merge. I recommend using Beyond Compare for this.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s