Manipulating web application HTTP traffic with Fiddler

I stumbled upon a weird bug in the front end of one of the web applications I am working on. This application performs an ajax request to a server and in return gets a relatively large JSON serialized object that is the result of a complex calculation. When I used the browser developer tools to investigate the response, everything seemed to be in order, so it looked like a client issue. The only problem was that the returned object is a result of a calculation depending on the specific information found only in an environment with no tools except for the browser itself, and the bug could not be easily reproduced in a development environment.

In order to reproduce the issue on my local machine, I performed a quick-and-dirty HTTP response manipulation, using Fiddler’s debugging capabilities.

About Fiddler

Fiddler is an HTTP debugging proxy with some amazing capabilities, currently developed by Telerik (see this Wikipedia article for complete history). For me, it is an indispensable tool for web developing. Even though browser’s developer tools network analysis capabilities have come a long way, Fiddler offers some advanced options like the one described in this post.

An example app for demonstration

I wrote a super simple application that fetches some articles form Wikipedia’s public API. This application performs an ajax GET request to the following URL:

https://en.wikipedia.org/w/api.php?action=query&list=categorymembers&cmtitle=Category:Biology&format=json&origin=*

And gets back a JSON serialized object containing some articles in the Biology category. I chose this API for demonstration because it is public, open (does not require authentication) and simple to use.

The original response object from the Wikipedia API call. Screenshot was taken from Postman

The sample application normal flow, running in Google Chrome. The ajax request is pending (1), then completes and the results are displayed on the page (2)

Manipulating the response

By default, Fiddler will monitor the browser HTTP requests (as a proxy server) but will not interfere them. There are two debug modes available: before requests and after responses. In the “after responses” mode, fiddler will get the response back from the server but will not forward it back to the browser. At this point, we get the chance to manipulate the response.

First of all, let’s enable this mode. From the menu bar, select Rules -> automatic breakpoints -> After Responses.

Enable “After responses” debug mode

Now, we will refresh the browser page in order to perform the request once more. The request is made, the response got back but it is paused in Fiddler.

The response is paused in the Fiddler proxy. The JSON serialized response payload is marked

The next step is manipulating the response. This can be done simply by editing the response text in the response inspection panel. This manipulation is demonstrated in the next screenshot.

Manipulating a single value in the response. In this case, I changed “Biology” to “Math”. After editing, click the “Run to Completion” button on the top bar

After editing the response, click the “Run to Completion” button on the Fiddler response panel. The manipulated response will than continue its journey to its final destination — the browser.

The final result: the altered value is displayed in the application (“Math” instead of “Biology”)

Use Case

This feature was just what I needed to quickly solve the client issue I was handling. First, I copied the whole JSON string from the original environment to my development environment (using the browser developer tools network tab). Then, I launched the web application on my local machine and got it to perform the ajax request. I used the “After Responses” debug mode in Fiddler and replaced the JSON payload of the original response with the data I copied earlier. The issue was reproduced and I was able to fix it in no time.

Final words

I’m sure many developers are not familiar with this debugging technique. After I used it recently, I was so excited about it and wanted to share it with the rest of the world. I hope you will find it useful in similar situations.