Using Fiddler with Firefox for Local Web site Testing Easily with FoxyProxy

Fiddler is one of the best tools to analyze web requests sent from a web site and much more. Normally, using Fiddler with FireFox is a huge pain and typically does not work well out of the box when testing localhost requests or any requests for that matter with Fiddler through Firefox.   But by using FoxyProxy which is just a nice plug-in to FireFox, it allows you to setup different proxies in FireFox very easily, and you can then hook into Fiddler's proxy quickly, and start to catch requests over the wire when testing local web applications.

Here is how to set up FoxyProxy for Fiddler and FireFox:

1. If you have not already installed Fiddler or Firefox, install these first.

2. Download & install the FoxyProxy plug-in for FireFox.

3. Now you will need to get to the FoxyProxy options.  In FireFox, at the right-hand corner you should see FoxyProxy running:

     Here it's just saying that FoxyProxy is not using any proxies at the moment.

     Now right click that bar and choose "Options".

4. Now click the "Add New Proxy" button.  We are going to create a new proxy instance in FoxyProxy that simply points to Fiddler's proxy BowserPAC.js config file.

5. First though we need to create a new pattern for this proxy instance and base it on a localhost wildcard so that any site that you run on localhost will be also caught when this FoxyProxy instance is running later on.

    So click the Patterns Tab then Add New Pattern button, then input the following:

    Pattern Name: localhost

    URL Pattern: *localhost*

    and then leave the default "Whitelist" and "Wildcards" options as is

6. Now click on the Proxy Details tab and select Automatic Proxy Configuration.  Here is where we are going to browse to Fiddler's proxy config file.

    a) In Windows XP, Browse and select the fiddler proxy config file located at the path

        file:///c:/documents and settings/YOURNAMEHERE/my documents/Fiddler2/scripts/browserpac.js

    b) Enable only the Notification about proxy auto-configuration file loads

7. Next, click on the General tab and fill in the following to define a name for this Proxy instance:

    Proxy Name: Fiddler

    Enabled: checked

    Animate icons when this proxy is in use (optional): checked

    Include this proxy: checked

    You've just created a proxy instance for Fiddler inside FoxyProxy.

8. Finally click OK and go back to the "Global Settings" tab then just change the "Statusbar Activation" left-click option to "Cycles through

    modes"

9. Now we are ready to actually use this proxy instance that we have defined in FoxyProxy.

    So in Firefox, look at the right-hand corner and click once on .  That's FoxyProxy running in FireFox. 

    Now click on it once.

    Notice it will change from being disabled to the pattern status .

    Now we need to tell FoxyProxy which proxy instance (that we just defined in options) to start using.

    To do this, right-click the patterns box and choose the proxy instance you created.  So select "Use proxy Fiddler for all URLs":

10. FoxyProxy has now been configured for Fiddler as the proxy, and selected as the instance inside FireFox and it's now running the Fiddler proxy.

      Now we can use fiddler to capture any requests made from FireFox on any website with no problem.

      You should now be seeing results in Fiddler (example shown below) after you click around on your localhost site. 

      Here's how mine looks now that fiddler is capturing any clicks made on my ASP.NET localhost web site :

      And now we are all set. As you can see above in my example, now you can inspect a ton of things on any requests captured in Fiddler.