ControlFreak

LANGUAGES:JavaScript | HTML

Fiddler

Free Microsoft Tool Can Help You Analyze Your Web Site?sNetwork Traffic

By Steve C. Orr

It?s no secret that Web sites consume network bandwidth. Andbecause network bandwidth is a finite resource, it pays to use it efficiently. Thereare many techniques Web developers employ for minimizing bandwidth usage:caching, compression, eliminating unnecessary postbacks, etc. But how do youreally know how efficient your Web site is with its bandwidth? You could employevery best practice in existence and still end up surprised about yourapplication?s bandwidth usage when you use a network analyzer, such as Fiddler,to see what?s really going on behind the scenes.

Bandwidth can inadvertently be consumed in a variety ofways, and it can all add up to significant amounts. For example, third-partycontrols can sometimes use bandwidth in mysterious and unexpected ways. Embeddedadvertisements and other components can contain logic that make network callsyou may not have anticipated. AJAXdoes wonders for usability, but it too can eat large amounts of bandwidth ifnot used with care. Caching can be complex to configure; if you?re not careful,you could end up with content not being cached as efficiently as you?d thought.

Inefficient network usage can cascade into bottlenecksthat limit the scalability of a Web site, and it can interfere with otherimportant network activity, as well. And, of course, on one end of that networkare one or more Web servers that also have a limited capacity for dealing withincoming requests ? so such requests should not be tossed around gratuitously.

These are all excellent reasons for analyzing the trafficbetween your clients and server using a tool such as Fiddler. However, you?renot the only one who can analyze details of traffic traveling between a clientand server. Hackers love to look for security holes in content traveling acrossopen networks, so you should analyze your traffic to find potential problemsbefore they do.

What Does Fiddler Do?

Fiddler gets installed on a client computer to helpanalyze exactly which HTTP content is (and isn?t) being submitted from thatclient across the network (see Figure 1). It captures details about every pagerequest, postback, AJAX request, andany other HTTP-related traffic. Using Fiddler you can see every piece ofcontent being requested from the server. It may be intuitive to think of a pagerequest as a single call across the network, but, in reality, it usuallyconsists of many small requests. First, the page?s HTML is retrieved from theserver, then many individual requests tend to follow for each external piece ofcontent the HTML references, such as images, JavaScript files, CSS files, etc. Eachof these items might be cached in various ways, and Fiddler can help identifythe details about how each item is (or isn?t) cached so you can optimize yourapplication?s network requests.

Figure 1: The Fiddler user interfacemay not impress your graphic designer friends, but it is highly functional andprovides a plethora of information about every HTTP network request detail.

Fiddler also captures AJAXrequests. Because AJAX requests areusually designed to be invisible to the user, without a tool such as Fiddler itcan be virtually impossible to detect from the client exactly when theserequests are being sent or what data they contain.

Fiddler also times each request and provides analyticalfeatures to help scrutinize such details. These features are helpful when itcomes time for performance tuning. We?ll get into more details about thisshortly.

Fiddler can also be used as a handy debugging and securityanalysis tool. Configurable breakpoints can be set so network requests may beanalyzed, and even altered, before being sent across the network. This isuseful for trying out various kinds of ?what-if? scenarios, including tests tosee how hacker-resistant your site is.

Your First Time Fiddling

The download and installation of Fiddler is routine. Onceinstalled, a toolbar button will be available in Internet Explorer?s commandbar, as shown in Figure 2. (In some cases you may need to configure yourcommand bar to get it to appear immediately.) It also can be launched from the Startmenu, just like any other program.

Figure 2: Fiddler can be launchedwith a single click from this toolbar button within Internet Explorer.

When you launch Fiddler, you?ll see its powerful (andsomewhat unsightly) interface, as shown in Figure 1. It will immediately startlogging network traffic. When you navigate to a new page in Internet Explorer(or Firefox), you?ll see the Session List in Fiddler start to log relatedevents. The Session List fills the left side of the Fiddler application windowby default, although its interface is fairly configurable via the View dropdownmenu. There is also a handy ?Stay on top? View menu command that can keepFiddler visible at all times ? even while clicking around in the browser.

Clicking on an item in the Session List will displayperformance statistics for that item, as shown at the right side of Figure 3. Youcan select multiple items in the Session List to see the aggregated performancestatistics for a group of requests, such as all the items associated with aparticular page request. The Performance Statistics tab details how many byteswere sent and received and how long it took. Fiddler goes a step further byestimating how long that same request would likely take from other parts of theworld and at various connection speeds, such as dial-up modem, DSL, etc. The ShowChart link at the bottom of the window will display an amenable pie chart.

Figure 3: Fiddler provides an arrayof useful performance metrics to help identify exactly which content isconsuming the most bandwidth.

When one or more items in the Session List are selected,you?ll notice a variety of useful options become available in the context menu(or the Edit dropdown menu) for saving or copying the selected items in variouslevels of detail. You can even mark interesting items with various colors tomake them stand out. To clear the Session List, simply click the Remove | AllSessions context menu item. Alternatively, you can choose to clear onlyindividual items in the list.

Double clicking on an item in the Session List willdisplay the Session Inspector tab (shown at the right side of Figure 1), whichdisplays a lot of information. By clicking through the resulting sub tabs youcan peruse a cornucopia of details about the selected request, such as therequest header, which often contains valuable and otherwise hard to obtaininformation (like cookie data and compression settings). You can also see otherviews of the selected request, such as text, forms, hexadecimal, authorization,raw, and XML. The lower information pane displays similar information, exceptrelating to the server?s response rather than the client?s request. It alsoprovides such additional views as privacy, caching, and image view (which isrelevant only when the selected response contains an image).

Analyze Events

Let?s go into a bit more detail about how to analyze therequests captured in the Session List. The Session List contains nine columnsof data for every request. These columns can be dragged around into whicheverorder is most relevant to you. The Host and URL columns contain details aboutthe server, path, and filename of the requested item.

The Result column shows the result code that the serverreturned for that request. For example, code 200 indicates a normal andsuccessful response, while 404 is an error code indicating the server could notfind the requested item. You may want to sort by this column sometimes (byclicking on the column header) so you can more easily isolate problematiccontent requests.

The Body column contains the number of bytes that werereturned for the requested item. This value may be zero if the item waspre-cached by the browser, indicating that the item didn?t need to be sent tothe client because it was already there.

The Caching column contains details about the type ofcaching applied to the item, if any. Typically, you?ll see expiration dates,max age counters, or ?no-cache? values in this column.

The Content Type column shows what kind of content isassociated with this request, such as ?text/html?, ?image/jpeg?, or ?application/x-javascript?.The Protocol column will generally contain ?HTTP?, although Fiddler version 2(in beta as of this writing) supports ?HTTPS? request analysis, as well.

Super Debugging

At the top right of the Fiddler application you?ll see theRequest Builder tab. This tab allows you to construct custom-page HTTP requestson the fly, including querystring parameters for get requests and form itemsfor post requests. You can define the entire body of the request any way you?dlike, just to see how the server responds. Of course, typing the entire body byhand would be rather tedious; luckily, there?s a shortcut. You can drag anexisting request from the Session List onto the Request Builder tab and usethat request as a starting point, modifying it as needed. Alternatively, youcan paste in request details from any other source.

Once you?ve customized your request the way you want,simply click the Execute! button and the request will be posted to the serverand the results will be logged in the Session List (where they can be analyzedjust like any other request).

Under the Rules dropdown menu there is an AutomaticBreakpoints menu item that allows breakpoints to be set just before requestsare sent to the server, or just after the response is received. This gives youan opportunity to analyze network traffic as it is happening. Furthermore, thisinformation is editable (in version 2 of Fiddler), so you can modify a requestafter it is generated but before it goes to the server. This can be useful fortesting security, as well as more general application features.

Fiddling with Fiddler

Clearly, Fiddler was designed with extensibility in mind. Forstarters, the Customize Rules item under the Rules dropdown menu will open ascript that Fiddler uses to manage various business rules. ThisJavaScript-based file can be modified to extend Fiddler with customized rulesand features.

For example, by adding the following code snippet to theOnBeforeRequest event, every request item that has a cookie associated with itwill be colored cyan in the Session List:

if (oSession.oRequest.headers.Exists("Cookie")){

  oSession["ui-color"] = "cyan";

}

The next example flags all large response items tovisually identify potential targets for bandwidth optimization; this codeshould be added to the OnBeforeResponse event:

if (oSession.responseBodyBytes.length > 30000){

  oSession["ui-color"] = "red";

  oSession["ui-bold"] = "true";

}

Each response item larger than 30K will display in bold inthe Session List and be colored red.

While these scripts are edited in Notepad by default, ifyou?re going to be doing much script editing you might prefer to download thefree FiddlerScript Editor as it provides a friendlier and more intuitiveinterface. You may also want to peruse the script examples listed on theFiddler Web site.

Other ways to extend Fiddler include adding new menu items(by adding a key to the registry) that launch custom applications, extendingFiddler?s pipeline with .NET code (using the IAutoFiddle interface), and addingcustom inspectors to supplement the built-in request and response inspectors. Allthese techniques are covered in detail on the Fiddler Web site.

Online Resources

The Fiddler Web site (http://www.fiddler2.com)has a surprising variety of useful tools and resources listed. Here are just afew:

• Fiddler Demonstration Videos: http://www.fiddlertool.com/fiddler/help/video/default.asp
• FiddlerScript Editor: http://www.fiddlertool.com/fiddler/fse.asp
• FiddlerScript Cookbook (script examples): http://www.fiddlertool.com/fiddler/dev/scriptsamples.asp
• Extending Fiddler with custom code: http://www.fiddlertool.com/fiddler/dev/
• Fiddler FAQ: http://www.fiddler2.com/fiddler2/faq.asp

The Fiddler Web site also lists some links to external Websites that provide useful Fiddler information:

• Fiddler overview on MSDN: http://msdn.microsoft.com/library/en-us/IETechCol/dnwebgen/IE_Fiddler2.asp
• Fiddler Blog: http://insidehttp.blogspot.com
• Fiddler Forum: http://groups.msn.com/HTTPFiddler/

Conclusion

Fiddler is a valuable software tool that every Webdeveloper should have in their arsenal. I applaud Microsoft for releasing thisfree and useful tool. Even though Microsoft doesn?t officially support Fiddler,it?s clear from all the previously mentioned resources that there is a lot ofsupport in the developer community.

Remember that Fiddler is a client-side tool that analyzesnetwork HTTP traffic. Therefore, it will not be able to analyze a Webapplication when running on that application?s Web server (because everythingis local in such a case, and there is no HTTP network traffic). This also meansthat if you?re developing and running your Web application locally on yourdevelopment machine, you won?t be able to run Fiddler from that same machine toanalyze the application. Of course, Fiddler will work great from any clientcomputer once the target Web application is deployed to a separate networkserver.

Scalability and bandwidth are important topics in softwaredevelopment today, and every top-tier developer needs to be familiar with themetrics involved. Now that you?ve gained some knowledge in this arena, and madeyourself a more valuable software developer as a result, I encourage you tokeep the momentum going by downloading Fiddler and getting to know it evenbetter. Download Fiddler for free (http://www.fiddler2.com)and start fiddling around.

Steve C. Orr is anASPInsider, MCSD, Certified ScrumMaster, Microsoft MVP in ASP.NET, and author ofthe book Beginning ASP.NET 2.0 AJAX by Wrox. He?sbeen developing software solutions for leading companies in the Seattlearea for more than a decade. When he?s not busy designing software systems orwriting about them, he can often be found loitering at local user groups andhabitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.net or e-mail him at mailto:Steve@Orr.net.