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.

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 high degree of customization/extensibility through a customRules scripting file (customRules.js).

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..
• ,etc... the list is never ending.

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

____________________________________________________________