HTTP Monitoring with Charles
With Ajax applications, there's often a need to see what information is being transported back and forth. Am I sending what I'm supposed to? Am I getting back the right response?
Most JavaScript developers have Firebug locked and loaded but its requirement to post data back to the server just to inspect the request isn't always a very pracitical solution. The information you get back may not always be the complete picture.
Alternative otions include firefox addons Live HTTP Headers and HttpFox. These are great options for quick and dirty sniffing but for a more thorough and featureful solution, there's only one tool that I go to: Charles.
Charles ia a cross-platform desktop application that acts as a proxy for all web requests, no matter what browser they come from; it can even inspect Flash-originated requests and Adobe AIR application requests. As the proxy, it's able to see all the information flowing back and forth and provide a detailed peek at every request and response.
One of my favourite features — and where it stands out from the Firefox addons — is the ability to view XML, JSON and even AMF data structures. It's easy to see right away if a request was successful or not and you get access to all of the request and response headers.
Firefox manages its own proxy server settings and requires a Charles addon which can be downloaded from the Charles web site. This will allow Charles to automatically turn on the proxy with no other intervention.
I have two minor issues with it, though. For one, Charles can cause SSL certificate error messages for HTTPS connections. Secondly, while it can replay a request (and allow you to edit what information is sent in that request), you can't see that replay within the browser. For this reason, I like to use Live HTTP Headers in this situation, which does allow you to do this, although its interface is awkward and prone to generate server errors.
Otherwise, Charles is a staple of my toolset and one o f my favourite tools for request and response inspection.
Conversation
I've been using Charles for a while now, and loving it the whole time. I think Charles really shines when you start to poke around with the advanced features. The local / network remapping is insanely useful, as is throttling and setting break points.
I use Charles on Mac OS X. A couple notes: Google Notifier and Entourage complain heavily while Charles is running, I believe it's because they don't like a proxy between themselves and a secure site.
If you're looking for another solution (Windows only) check out Service Capture it offers similar functionality as far as AMF / XML / JSON debugging and is less feature rich and cheaper.
Chaz is also a *must* when creating AMF services for Flash objects. It decodes the objects and can give you information about AMF objects, their types, etc.
Highly recommended for the Flash/Flex among us. :)
Well Jonathan it seems we both use the same programs for everything. What program do you use for PHP Development? Do you own CSSEdit?
@Jake: for PHP development, I'm still getting settled into things. I had been trying out Zend Studio while on the Windows machine and installed it on the Mac, since I had a license for it. However, I've also been playing with Textmate. The svn bundle has worked out okay, although deploying larger batches of changes doesn't feel fluid. I'm also thinking of trying out VIM to a greater degree than I have. We'll see how that goes.
As for CSSEdit, the other Sidebar Creative crew have said it's a must but I haven't had a chance to use it since I got my Mac. I'll be sure to keep you posted. :)
The net panel was re-implemented on Firebug 1.3 and it does not longer do double loads to inspect http requests ( this works on Firefox 3.0.4 or higher ).
@Apostolos: I just did some quick testing and you'd appear to be right. Odd, since Firebug still presents the message about double-posting. Why is that message still there if the bug has been fixed?
Charles is also good for throttling your download speed. Which helps to simulate low bandwidth connections for testing things like preloading in Flash.
I invested in a copy of Charles when I got into Flex development - an excellent tool and well worth the price - it is not very expensive anyway.
@Jonathan: Do you have any experience with the PHP bundle of NetBeans? I've installed Zend Studio last month after working with Eclipse (and PHPEclipse) for 2 years and never really liking it, and I have to say, I'm a little disappointed. When it's running it seems to load the whole 500MB into the RAM, which isn't very kind to my old laptop. So, it might be that I'll go for Zend Studio at work, and Netbeans at home, if it's any good.
Dude the easiest and safest way is surely to run tcpflow -c port 80 ....
Glad to learn of Charles as a Mac solution. I've been using Fiddler on Windows for a while and it's fantasticly full of features, it can even handle SSL connections with a couple clicks!
If you have both a Mac and Windows systems you can tell Fiddler to Allow Remote Connections so your Mac browsers can use it too.
http://www.fiddlertool.com/