Fiddler : Web Debugging Proxy

Last update : May 22, 2015

Building web applications is hard work and most people remain unaware of how their web application is interacting with the web browsers that their clients have installed. Fiddler,  a free web debugging proxy created by Eric Lawrence, helps to simplify the analysis process substantially by logging all HTTP(S) traffic between your computer and the Internet. Fiddler is a transparent proxy that automatically adds itself to the WININET chain so that it can see every request being made. It logs those requests and the responses to allow you to see what is working and what isn’t working.

Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language. Fiddler is freeware and can debug traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and thousands more.

The developper, Eric Lawrence, was Security Program Manager at Microsoft for Internet Explorer. After over a decade of working on the web for Microsoft, Eric joined Telerik in October 2012 to enhance the Fiddler Web Debugger on a full-time basis. Telerik is devoted to making software development easier and more fun and has committed to keeping Fiddler free and expanding its value by further investing into the tool.

A quick summary of getting started with Fiddler has been published at Developer.com. A detailed documentation is available at the Fiddler website. A discussion forum and a developer section are available at the same site. Various addons and third-party extensions have been developped.

Fiddler can be configured to analyse the http traffic of iPad’s, iPhone’s and other web devices.

A simular tool called Charles is available for Mac Computers.

Some related tutorials about Fiddler and HTTP debugging are listed hereafter :

screen.width & screen.height for iOS devices

You can detect the screen dimensions of a web device via JavaScript by using screen.width and screen.height.

For an iPad one would think that screen.width would be 768 when being held vertically and 1024 when held horizontally. However, screen.width is always 768 regardless of the way you’re holding the iPad; likewise, screen.height is always 1024. The same is true for the iPhone/iPod Touch. screen.width is always 320 and screen.height is always 480.

The iOS devices support however the window.orientation property, so if necessary, you can use that to determine if the user is in horizontal or vertical mode.

  • window.orientation is 0 when being held vertically
  • window.orientation is 90 when rotated 90 degrees to the left (horizontal)
  • window.orientation is -90 when rotated 90 degrees to the right (horizontal)

There is also the orientationchange event that fires on the window object when the device is rotated.

The mediaquery “orientation” works also in current versions of Safari and Firefox on a desktop machine. Simply change the size of your browser window until the height is longer than the width and you get “portrait”.

Scroll content on the iPhone and iPad

To scroll content inside a fixed width-height element (e.g. div) on an iPhone or iPad, the user must use two fingers to scroll any area on a page that is not the entire page. One way to work around this ‘feature’ is to implement a touch event handler that moves the div up when the user touches it.

A better way to add one finger scrolling to divs on iPhone’s and iPad’s is the iScroll4 script developed by Matteo Spinelli. This script provides the following features :

  • Pinch / Zoom
  • Pull up/down to refresh
  • Improved speed and momentum
  • Snap to element
  • Customizable scrollbars

Thoughts on Flash by Steve Jobs : go to HTML5

Recently, Steve Jobs published his thoughts on Flash on the Apple website.

Steve Jobs explains why Apple does not allow Flash on iPhones, iPods and iPads.

  1. open standards : Adobe’s Flash products are 100% proprietary
  2. full web : most videos are available in a modern format, H.264, and viewable on iPhones, iPods and iPads
  3. reliability, security and performance
  4. battery life
  5. touch : Flash was created for PCs and mice, not for mobile devices with touch interface
  6. Apple wants to provide the most advanced and innovative platform to the developers

Steve Jobs recommends to use the open standards HTML5, CSS and JavaScript for mobile devices.

One on the first to follow this idea is the developer of the JW video player, Jeroen Wijering. Even if he thinks that there is still a lot of work to be done before HTML5 reaches the maturity level that Flash has for delivering video content to the users, he released the beta version of the HTML5 JW player two weeks ago.