Debugging AJAX and HTTP Requests for Web Applications

You have an AJAX based or just plain old HTTP based Web Application. You want to see some way to know what transpired between the Server and your web client. There are several reasons to know this,

• first in that case you can avoid printing lot of Logs in your server thus less burden on your server.
  
• Another reason is quicker Code-Debug cycle, its lot more easier to finish off all the test/pick logs/correct in one system..and the deploy your code in server.
• You really want to know if your request reached the server, what parameters you sent in your GET/POST query, what other HTTP headers you sent along (such as session Id/cookie info) in addition to whatever you want to know, such as when is the Content Expiration date..
  
• You plainly have no idea what the application you have taken responsibility does, you want to know what URL your application launches, what it does, and use the URL to continue to debug, so that you can quickly reach the spot where your HTTP request hits the server and what process/whatever is called from there...
  

There are several tools that you can do.. with increased efficiency and productivity. All of the tools mentioned below are Free and mostly Open Source (Free!=Open Source)..

Lemme start from the most lame ones to the more specific ones and tell you which could be a good one..
1. Ethereal -http://www.ethereal.com/
Ethereal is more a network Packet capturing tool, however, it can be used to capture HTTP traffic alone. In the filter option choose the HTTP as the protocol. If you know which URL/port your client calls, it can make things more specific. Once you get the result, you start scratching your head about how you comprehend the packets that have been captured. You need to select all the packets captured and then choose the HTTP Response Data option (donno where its , but basically it appends the packets in sequence (even if they are out of sequence) to get the response data as a stream that you can copy somewhere and continue debugging). This is a good option, but over time, you will understand that, you need to have all your other applications that use HTTP to be out of the capturing system (by setting proper filter mechanism) or close all applications that use HTTP. Also, that makes things slow, because I assume Ethereal patches the actual TCP stack files in your system and would painfully process every packet coming to your system (or sent from your system), then apply the packet filter and then show in the window it has.
Time to grow up for a better tool


2. IE HTTP Headers and its clone in Firefox called LiveHTTP Headers: www.blunck.info/iehttpheaders.html & livehttpheaders.mozdev.org/

They basically sniff whatever traffic is sent from or sent to/from your browser. IEHTTPHeaders has a distinction for HTTP and HTTPS with colors and you can choose the colors. That way its a good tool. What its bad at is that, it contest with McAfee Virus Scan for the same API when sniffing Browser traffic and can cause your IE to crash randomly sometimes and usually when you exit IE (you will forget when you last closed IE without a crash)...
Live HTTP Headers seem to be good, I haven't had issues with that, but neither have I worked in a great deal with it to certify that it doesn't have problems. Both IE HTTP Headers have questions when a request comes early but its HTTP response is late and between that time window, some other smaller request is answered. There is no intuitive way to know that. Atleast in Live HTTP Headers, it seems to be better with a horizontal line. Its tough in IEHTTPHeaders.

Overall comment is: Well, this looks cool , better than just sniffing logs... but this too can be overwhelming at times, when you have quick several requests... Also I have seen Firefox Freeze (run at 100% for a long time ) a few times and I cudnt pin point on LiveHTTPHeaders, so I leave that to you to decide.

Time to pick a better one..

3. This was called Firebug. http://www.getfirebug.com

Its a Firefox plugn. It helps people to know whats the status of the curretn request(same as previous ones). But the best part starts when you have too many requests from the server, it can show the time frame window in it (for the requests for /from the client in server which could be concurrent or that 2 of them are waiting.. something will happen that way....This one shows the Firebug Sniffer logs only for the browser window its associated with. Hence, that way its quite useful. The more interesting ones are that can see how much time a particular request has taken. Also this gives you a picture of whats happening in client at any point of time..It also shows a DOM tree, you can use that to run through the DOM for the page, which is an effective tool for debugging fro the server for the web clients.

and quite a few other options. You can quite obviously see that I m interested more about the third one(Firebug). One bad thing is that its not available for IE. but the better part is that its available in Firefox... IE has a similar tool, but not as good as this (its more matured one, but at the same time, its kind of either missing or .. Its called IE developer toolbar. I see that it has the best options such as resolution, clearing cache for a particular domain etc. But its not a matured product, in which case, its wise to think 2wice before you used it(with occasional internet explorer crash event for free).

I will paste screen shot as and when I find time...

PS: I wrote this in half sleep towards end, if you find any mistakes do comment and let me know, I will change that