Friday, April 16, 2010

Web Debugging with Fiddler

In a previous blog I mentioned the free Wireshark utility, which has been my number one debugging tool for several years.  Being able to see everything coming into and out of a PC, and having enough network background to glean the important details, has served well.  During a recent problem I needed to debug a web application that only ran using encrypted (https/ssl) communications.  Wireshark was able to show me what was happening with session setups and encryption exchanges, but all the application data was just a garble of meaningless characters.  Enter Fiddler, a free tool provided by Microsoft.  

Fiddler is a web debugging proxy that captures all http, and optionally https, data from any web application that can point to your loopback address (127.0.0.1) on port 8888 (the default).  The interface displays a list of request/response pairs and its status code on the left side of the screen and a detailed breakdown of the request and its response on the right.  There are multiple views available to visualize each request and response.  I find the Statistics view useful to see the number of bytes sent and received and its response time, and the Inspectors (Raw View) to see the gory details.  Other frequently accessed views are the Inspectors (ImageView), Filters and Timeline.  Third-party developers add more features to Fiddler and I've installed neXpert to generate detail reports with suggestions for improvements, Watcher to detect potential security issues and JavaScript Formatter to make JavaScript easier to read. 

Launching Fiddler can be via its shortcut or from Internet Explorer using the Tools ... Fiddler2 option.  Fiddler will automatically change Internet Explorer's proxy settings, which also affects all other applications, like the Google Chrome browser, that use the same settings.  Mozilla's Firefox, which does not use IE's proxy, can be controlled via an option installed in the lower right-hand corner. 

Capturing and displaying encrypted data requires changing some default options, located under Tools ... Fiddler Options ... HTTPS tab.   I suggest you read the information found at the "Learn more about HTTPS Traffic decryption and certificate errors" link.

Fiddler has a number of features, more for the professional developers and tester, that go way beyond simply displaying data.   You can set breakpoints and even fiddle (hence the name) with the data and inject your own.  But just seeing what's really going on "behind-the-scenes" can be eye-opening.

For more details, instructional videos and download, visit www.fiddler.com.

No comments: