From Ajax Patterns
Tags: Capture Intercept Log Monitor Network Record Sniff Traffic
How can you diagnose errors and strange behaviour?
Diagnose problems by sniffing Web Remoting traffic. Many Ajax problems arise because Web Remoting messages are either wrong or not sent at all. Debugging and general logging on either side of the network might help you infer what's being transmitted, but it's better to grab the traffic directly. There are various ways to do this:
- In the browser, encapsulate XMLHttpRequest Calls in a wrapper which logs the request and response (see Logging). This may be the most convenient technique, because the programmer's probably already looking at the browser.
- Employ a generic network traffic monitor, filtering on HTTP traffic to and from the server.
- Configure your browser to use a generic HTTP proxy, and have the proxy log interesting traffic in either direction.
- In the server, intercept incoming and outgoing traffic for logging. Server-side frameworks often have a common controller object which can be instrumented to capture information in either direction. In addition, interception facilities are often available, such as Java's Servlet Filters.
Traffic Sniffing is a kind of Logging function. As such, you'll probably want similar filtering functionality, e.g. to see only messages in one direction, matching certain text, or to a particular URL.
XMLHttpRequest Tracing and XMLHttpRequest Debugging
Fiddler is a Windows proxy specifically designed for analysing and "fiddling" with browser-server traffic.
Adam Vandenberg has noted that his personal flangelib.js library contains an XMLHttpRequest wrapper that performs logging. While you're unlikely to use that library directly, it's a function the more popular XMLHttpRequest wrapper libraries may eventually implement. The main barrier right now is possibly the absence of a standard logging library (see Log).
Following is the output from the XMLHttpRequest Tracing script during the initial load sequence for the Ajax Patterns Reader. First, the request is logged:
http://blog.monstuff.com/XmlHttpRequestTracing:  intercepted open (GET , patternList.phtml , true , undefined , undefined) http://blog.monstuff.com/XmlHttpRequestTracing:  intercepted send (null)
Then, the result, showing response code (200) and content:
http://blog.monstuff.com/XmlHttpRequestTracing:  intercepted load: 200 Ajax Stub|||Browser-Side Cache|||Browser-Side Templating|||Browser-Side XSLT||| ....
Traffic Sniffing in the browser is a form of Logging.