Fiddler: Customizing Rules and Creating Extensions

Recently I’ve been working on a project where the client and server are communicating via HTTP and sending extra headers that help with diagnostics and tracing. I normally use Fiddler to inspect the traffic and extract the header values which I then copy paste into other tools to search logs. I wanted to customize Fiddler to give first-class support for this extra service specific headers and compiled my learning about how to create custom rules and extensions into this blog post.

For example, a request might look like this:

In the request above you can see an x-session-id and x-activity-id which are both GUIDs as well as another custom header x-json-data which is base64 encoded json data.

(Yes, it is unusual to have base64 encoded JSON in a header, but this service needed a way to pass a data structure more complex than simple key-value pairs to the receiving service and JSON is a nice compact serializable format. The base64 encoding was to eliminate the comma’s in JSON strings which would cause issue with header parsing and possibly be incorrectly interpreted as a multi-value header.)

Fiddler allows you to inspect raw requests and responses to see the headers but in order to do this you have to select the request and can only view one at a time. In the case of simple headers such as x-session-id or x-activity-id it would be nicer if the header has it’s own dedicated column on the request list so it can be easily detected and read while scrolling through the list. To add the custom column there are many ways and I will go through each of them.

In the case of x-json-data this header is more specialized data and it would be nice if we could interact with the JSON the same way we interact with JSON in the body of requests. For this task we would need a custom extension which adds a new request inspector and I will show how to create that.

Adding Custom Column

All the different ways you can add a custom column in Fiddler.

Right-click on any column header and select “Customize Columns”

Image for post
Image for post
Customize Columns using GUI

Another box will pop-up and you can simply enter the name of the header you want to display:

Image for post
Image for post

Now we click “Add” and can see our header value in a column and re-size or reposition as we like:

Image for post
Image for post

As the section says this method is by far the easiest; however, this only works for headers. If you want to display any other part of the request in a column you would need to use a custom rule.

Rules are defined in FiddlerScript and I highly recommend to install the FiddlerSript editor which gives you syntax highlighting and validation when editing. You can edit them in any text editor, but it is more error prone.

To edit the rules select “Rules > Customize Rules (Ctr+R)”

Image for post
Image for post

If this is the first time you’re attempting to customize rules and your editor settings are not changed it might prompt you to download the FiddlerScript editor, but if not you can download it directly from here:

The next thing you want to do is configure Fiddler to use this editor when customizing rules (by default it will use Notepad). To this select: “Tools > Fiddler Options”

Image for post
Image for post

Next, select the “Tools” tab on the far right, and update the paths to the editors of your choice.

Image for post
Image for post

At this point, you should have FiddlerScript editor installed on your machine and Fiddler configured to open it when customizing rules.

Now let’s start editing.

Documentation on Customizing Rules:

Specific Techniques to add columns:

Notice there are three ways to add a column:

  1. The BindUIColumn Attribute

2. The AddBoundColumn method

3. AddBoundColumn but reference function
This function is the same as method one but must be static.

Update: I noticed there is a new tab called “FiddlerScript” which makes this setup process easier:

Image for post
Image for post

Now you can see we’ve added the two custom columns for x-session-id and x-activity-id .

Image for post
Image for post

Let’s move on to the harder part which is creating a custom extension.

Creating Fiddler Extension

Remember our goal is to create a custom extension that allows us to inspect and interact with the base64 encoded JSON that is in the x-json-data header.

Since this process involves a lot of steps I decided it’s easier to make a video than try to screenshot every step.

Here is the information I use to create the extension:

All of the content about creating an extension is based on Jon’s post above. I just put it into video format for easier consumption and forcing myself to learn. He open sourced his extension which you can use to get started:

Remember to configure Fiddler with this:

prefs set fiddler.debug.extensions.verbose True

You can also check by typing: about:config in the QuickExec input.

Hope you learned how to create custom rules and extensions. Let me know how you liked the article.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store