Fiddler2 is a tool that acts like a special proxy server between your computer and a website. It is probably the most popular debugging proxy out there. It basically works by your web browser sending HTTP or HTTPS requests to Fiddler which then forwards them to the web server. Fiddler also captures all of the web server’s responses. It then allows you to dissect all of the information that is passed back and forth. This can be extremely useful when developing or trying to troubleshoot bugs where you are not sure what is being passed back and forth.
Go to http://www.telerik.com/fiddler and click on the ‘Free Download’ button. We chose the ‘Fiddler of .Net4’ option. Walk through the setup process, it is very straightforward, then launch the application. You should initially see a screen like this.
At first glance, this can be a lot to take in, but we will go through some of the basics. On the left hand side, we have the Web Session List, which displays information about each request from your web browser.
Let’s look at a few of the columns in the Web Session List.
On the right hand side, we have tabs that display specific information about the selected item from the Web Session List. We will get to some of the details next. Let’s open up a web browser and go to the following web address: http://www.itsolutions-inc.com/
If you look at the line, where the red arrow is pointing, you will notice that the Host is the same as the URL you typed in. This is the initial call to the web server. If you look below it, you will see separate calls for different items like pictures and fonts. These separate calls happen behind the scenes and you would never know they were occurring if not for Fiddler. Now click on the line for the initial call and you should see the right-hand panel change.
After you have installed the add-on, close Fiddler, open it back up and refresh your web browser. Next, click on the initial call to http://www.itsolutions-inc.com/
On the right hand side, we start off with the Inspector tab already selected. You can see the Request Header on the top; and at the bottom you can see additional data about the Response. Here is some additional information about some of the other tabs.
Last example, suppose we have an application that makes an AJAX call to a server. In this instance, it sends information to the server to be saved. Imagine you are working on a change to the application but cannot figure out why a specific value is not updating. If you look at the picture below, we can see what a response to an AJAX call looks like.
You can see in the top section, we have the Inspector tab and the WebForms sub-tab selected. This shows us the information that was sent to the server from the web browser. Below that, in the response, we see the data that the web server sent back to the client. Here we can see exactly what is being passed up and down the pipeline and it can help us pinpoint where problems are occurring.