Fiddler: A Powerful Web Debugger

What is Fiddler?
Fiddler is a utility that logs all HTTP request/response between your browser and the Web Server. Fiddler allows you to inspect all HTTP Traffic, set breakpoints, and “fiddle” with incoming or outgoing data.

What not is Fiddler?
It’s not a kind of debugger that will let you trace into the code line by line during runtime. It will not highlight any js/jsp/java errors.

Why use Fiddler?

  • Dynamically read/validate/edit data going out of the browser even before they reach the java files (formbeans, servlets etc). (Basically coming out of script files JS/JSP)
  • Change js/jsp code on the fly before it’s rendered by the browser.
  • Continue working on the application even if the database is down using stubs.
  • Validate your fix in CIT/SIT environment directly, without waiting for the environment migration to happen.
  • Server Side checks can be validated/tested skipping the client side validation (no need to disable client-side checks; eg: required field, max field size, field type, etc)
  • Find and replace or put breakpoints for any search string dynamically in the request/response body.
  • It works on HTTP request/response and is no way specific to js/jsp/java (will work with anything and everything if communication is happening in terms of HTTP request)

Installing Fiddler
Download and install latest version of Fiddler from this link: http://www.fiddlertool.com/Fiddler2/version.asp
Please note, it requires MS .NET Framework 2.0 to run.

Fiddler operates at this layer
Fiddler intercepts the request and response before and after it reaches the Web-Server. It sits in between the browser and the Web-server. Fig-1 and Fig-2 represents two different views of the layer at which Fiddler operates

Fig -1                                                                                                   Fig -2

Running Fiddler
There are two ways to launch Fiddler:

  • Option 1: Fiddler installation by default adds an icon in the command bar of the IE browser
  • Option 2: Open IE browser –> Tools Menu –> Fiddler2

Fiddler User Interface:
Fiddler User Interface consists of the following major sections (which is in the scope of this discussion):

HTTP Session List / Fiddler Logs
This area contains all the HTTP traffic listing happening between the browser and the Web Server. For each request made to the Server, there is a log/record present in this section. The logs may contain requests made for any of the following file types (js/jsp/htm/gif/jpeg/ico, etc).

Session Inspector Tab:
Contains information specific to the selected Fiddler Log.

  • Request Section
  • Reveals the request details made to the server for the session/log selected. All the modifications to the request are made in this section.

  • Response Section
    Reveals the response details from the server for the session selected. All the modifications to the response are made in this section.
    The Session Inspector contains various sub-tabs for each Request and Response section.

    • Headers
    • Displays the request header information

    • TextView
    • Displays the request/response body contents and is the area that will be used most for dynamic request/response fiddling.

    • WebForms (for Request only)
    • Displays the parameters sent to the server in the form of WebForms. This sub-tab is available only for the request section (and not responses)

    • Raw
    • Displays the full request/response in the raw format containing the header and body.

    • XML
    • Displays the request and responses in the form of xml/dom and makes parsing through the request/response easier. It is available only if the request/response can be structured in the form of xml/dom, else will be blank.

      There are other optional sub tabs that can be added to Fiddler through the Addon Installation.

Customizing Fiddler

Fiddler provides tremendous level of extensibility and customization. It provides two mechanisms to do this:

  • .NET APIs
  • Fiddler exposes a set of API’s written in .NET that can be used further to extend it. Fiddler loads extensions (assembly DLLs) written in .NET. Its analogous to the plugin feature in Eclipse IDE.

  • Script File
  • Fiddler provides extensibility through JScript.NET scripting file called “CustomRules.js” file. This is similar to other scripting language (JavaScript, VBScript) and exposes many API’s to work on the Session request and response. This is a quicker way to customize Fiddler and mould it according to your requirements. You can find some sample scripts here FiddlerScript Cookbook that demonstrate how powerful can Fiddler be made using these scripts. The following are some of the examples that you can achieve using script file:

    • Add new Sub Menus with custom functionality
    • Add new Context sensitive Menus with custom functionality
    • Add switches to set breakpoints on the request or response as it originates and arrives
    • Hide a specific session from appearing into the Fiddler session logs (like gifs, ico, jpeg, xml, etc)

Some examples of Fiddler customization:

  • Put breakpoint if any given string match is found in the requests/response body.
  • Put breakpoint if any given string match is found in the request/.response URL.
  • Add a sub-menu item into the Fiddler Rules and Tools menus.
  • Add an item in the context menu (right mouse click)
  • Make Fiddler respond with a local file (js/htm/css, etc) for the request made to the server.
  • Make Fiddler responds with a local stub for a request made to the server. This is explained in the section “Generating Fiddler Response Stub”
  • Make the items (js/htm/css,etc) non cacheable by the browser so that the files on the server/updated ones are always displayed..

This list is limited only by your requirements and how much you can play with the Scripts to make Fiddler serve to your needs.

Fiddler in Action

Let me walk you through some of the tools available in Fiddler with screenshots:

Fiddler Session Inspector
The below screenshot shows Fiddler exposing a sample request and response session details being sent from the Web browser and as it arrives on the system, before getting rendered on the browser.

Now here comes the best part.
Fiddler allows you to set a breakpoint on the ongoing request and incoming response so that you can do any dynamic modification to the parameter values in the request (before it reaches to Web Server) and response body (before it reaches the browser’s render engine) and then continue the execution.

Fiddler Request Builder
Request Builder Tab provides the ability to replay a previously executed request with the request body modified (optionally) to check the corresponding response from the Web Server.

Now here comes the best part.
The request can be modified in any way and then executed to test how the Web Server responds. This can also be done through the browser but Fiddler provides an easy interface and capability to do request modifications dynamically. Also Fiddler can be set to replay a given request any number of times in sequence. This is a good option to Load/ Stress test the Server

Fiddler as a Profiler
The Statistics tab shows some critical request and response related data such as Turn-around-time, page weight (in terms of byte counts), number of different response codes, total number of requests executed for a session, the performance of session if migrated on WWW (world wide web), a graphical chart to clearly figure out what is the heaviest component (htm, js, xml, images, etc) in a session, etc.

Now here comes the best part.
Fiddler can be used to profile or highlight some performance related statistics that can help to remove the bottlenecks present in the application from the UI side. Also Fiddler has a “Timeline” tab that gives the comparative listing of the turn-around-time of a request in terms of milliseconds. This feature provides ways to do an exact comparative

I will soon be posting an article on “Customizing Fiddler” using customRules.js scripting file.

About these ads

2 thoughts on “Fiddler: A Powerful Web Debugger

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s