Fiddler Setup & Configuration: Mocking And Manipulating API Behavior With A Local Proxy Server – Part 4

In this five-part article series, you will learn how to manipulate your API behavior with a local proxy server. After an introduction, learning how to set up and configure Charles Proxy, and seeing it in action, we are now taking a look at the Fiddler setup and configuration.

In this article:

For Windows, you have to download the setup file and follow the instructions.

For macOS and Linux, you need to have the Mono framework installed on your machine. Make sure to install Mono version 5.18 as Fiddler cannot decrypt SSL connections on newer versions. Telerik is currently re-implementing Fiddler’s features in a new project called Fiddler Everywhere, which is not yet rich enough of features as we would need it.

To execute Fiddler on macOS, you have to follow two steps:

  1. Accept the xcodebuild license by executing on the terminal: sudo xcodebuild -license
  2. Start Fiddler with the 32-bit command: mono --arch=32 Fiddler.exe

The first run can take a couple of minutes. Once Fiddler starts, you will be prompted for your password so that Fiddler automatically sets up your system proxy.

On Linux, you have to set up your system proxy settings manually. You can either

  • set your $http_proxyand $https_proxyenvironment variables to localhost:8888 or
  • install a browser add-on for easy toggling between proxy on/of just for browser traffic.

SSL Decryption

For HTTPS traffic inspection, you need to set up SSL decryption in an extra step. When enabled, Fiddler opens encrypted channels on its own and acts as a middleman. Fiddler’s certificate has to be trusted to avoid security errors.

On Windows, click “Tools” → “Options” → “HTTPS”. Check “Decrypt HTTPS traffic” and then select “Actions” → “Trust Root Certificate”.

On Linux, this option creates an error. Instead, you have to trust the certificate manually. To do so, select the action “Export Root Certificate to Desktop”. Then execute the following commands:

				
					$~ sudo mv Desktop/FiddlerRoot.cer /etc/ca-certificates/trust-source/anchors/FiddlerRoot.cert
$~ sudo trust extract-compat
				
			

Then restart Fiddler and your browser.

On macOS, please follow this guide.

Recording Your Traffic

Fiddler has the recording feature turned on by default, so you will probably see much recorded traffic already.

To get rid of the noise, you can activate a filter to focus completely on your project’s traffic. On the right side, select the tab “Filters”. Then check “Use Filters”, select “Show only the following Hosts” and enter your API’s domain.

Deactivate Caching

Like in Charles Proxy, you need to disable caching to get any response bodies. In the menu bar, click “Rules” → “Performance” → “Disable Caching”.

The next and final article of this series will show you Fiddler in action.

Free
Newsletter

Current articles, screencasts and interviews by our experts

Don’t miss any content on Angular, .NET Core, Blazor, Azure, and Kubernetes and sign up for our free monthly dev newsletter.

Related Articles
.NET
Incremental Roslyn Source Generators in .NET 6: Adapt Code Generation Based on Project Dependencies – Part 5
The Roslyn Source Generator, implemented in the previous articles of the series, emits some C# code without looking at the dependencies of the current .NET (Core) project. In this article our DemoSourceGenerator should implement a JsonConverter, but only if the corresponding library (e.g. Newtonsoft.Json) is referenced by the project.
08.07.2022
Angular
Configuring Lazy Loaded Angular Modules
Making our Angular modules configurable is an important step in building a reusable architecture. Having used Angular for a while you might be familiar with the commonly used forRoot() and forChild() functions, that some modules provide you with. But what is the best way to provide configuration in these cases?
16.06.2022
Angular
Master Web Component Forms Integration – with Lit and Angular
When a company has cross-framework teams, it is a good choice to use Web Components to build a unified and framework-independent component library. However, some pitfalls are to consider when integrating these components into web forms. Therefore, for a better understanding, we will look at two possible approaches and try to integrate them into an Angular form as an example.

Notice: All code samples are available on Github!
09.06.2022