Testing AJAX applications with Fiddler

Testing AJAX web applications is very difficult. Ajax relies mainly on requests to the server  ( and responses received from them). We can't test what is sent and received from the server. The way to solve these problems is to use HTTP Proxy.

A HTTP proxy is a small program which intercepts between the client requests and responses to and from the server. The browser sends a request and the HTTP proxy receives the request. It then sends the request to the server and when it is processed, the response is sent back to the HTTP proxy. It is then sent to the browser. In addition to the interception job, it also records the information transfer. Fiddler is one such HTTP proxy tool which is used for testing and debugging Ajax applications.

                              

Fiddler, a free tool is an HTTP proxy for WINInet, which is the Internet Communication library used by many desktop applications, including Internet Explorer. Once installed, Fiddler automatically begins intercepting HTTP traffic to and from your computer.

Download Fiddler

Configuring Fiddler

If you want to get fiddler to listen to the requests too, go to Tools > Options > Connection > Connection Settings and check "Manual Proxy Configuration", "Use the same proxy for all protocols" and enter 127.0.0.1 port 8888 and click OK.  Note that this will pose problems if you close Fiddler as your proxy is gone, to solve the problem change back to "direct connection to internet".

Using Fiddler

The Fiddler window has two main regions. The left region shows all the requests that were sent from the machine. Each request is represented in a line. The line includes the response status, the protocol used (usually HTTP), the host name, the URL, the caching type, the length of the response, and the content type.

The right region has three tabs which are Performance Statistics, which displays information relating to data transmission rates, including the number of bytes sent and received as well as the types of data received. The Session Inspector tab provides information about the request and the accompanying response. The Request Builder tab allows you to manually construct a request and observe its response.

Another main feature of Fiddler is it has the ability to set breakpoints for HTTP requests and responses. As the request breakpoint is set, the Session Inspector tab is filled with information about the request. We can change the request before it is sent to server. Similarly, before the response is sent back to browser, we can edit the response.

Ajax debugging with Fiddler

• Ensures that correct data is being sent to the server
• Ensures that the data is sent in correct format and contains correct data
• Checks whether correct response is received from server
• Setting breakpoints for the request and response helps in finding out the error easily

Once you've recorded a session in fiddler you can then select the requests you're interested in, right click them and save them as a Visual Studio Web Test. You now have an XML file with the .webtest extension, ready to be imported into Visual Studio. Web Tests are used for testing the applications in Visual Studio 2005. You can know more information from my previous post Web Tests with Visual Studio 2005

You can find the Fiddler demonstration videos at this link

Source Via [Wrox Article]