"XMLHttpRequest Tracing" for AJAX debugging

Here's a Greasemonkey user script to trace XMLHttpRequest calls in the javascript console. It logs the "open" and "send" calls, as well as the response status code and text.
Its purpose is to help peek into AJAX applications, to learning or troubleshooting, without having to run a network sniffer.

This screenshot shows a sample output (Google Suggest). Each XMLHttpRequest instance is assigned a random ID (781 in this example) that allows you to track multiple requests being run in parallel.

It's a pretty early version, so feel free to send some suggestions and feedback.
It doesn't work on GMail. I'm not sure why yet (any pointers appreciated ;-).

Thanks to the anonymous contributor that posted that idea in the Greasemonkey user script requests page.

Update (2005/06/02): I just posted a new and re-vamped script for XMLHttpRequest debugging. It implements some debugging features beyond simply tracing, such as editing and replaying requests.

Update (2005/07/10): Due to security reasons, the GM_* functions were removed from Greasemonkey 0.3.5 until a more secure design is found. The XMLHttpRequest Tracing script requires the GM_log function and therefore won't work at all on these "neutered" versions of Greasemonkey.

Update (2006/01/12): Fixed script to work in Firefox 1.5 with Greasemonkey 0.6.4. It's probably broken for older version thought.

I tried it for www.backpackit.com, and it made it so that Backpack would no longer accept my updates.

Sage, I just tried it on backpackit.com and I didn't have any problem (updates are working).
What specific operation is not working?
Thanks,

I tried adding an item to a list and the little spiraling "pending" circle icon just kept spinning. Same thing when I tried to add a note.

I thought maybe it was making a server call to this site and that was slowing it down, but I let it run for a couple of minutes and nothing happened.

I also noticed that when I tried to delete items, they disappear as if it worked correctly, but when I refresh or login with a different browser the items are actually still there.

This is a nice exercise, but why not just use Live HTTP Headers?

Adrian, Live HTTP Headers is most useful. But it only shows the headers, whereas this user script also shows the body of the response, which is quite useful in AJAX applications.

I'm thinking of adding some XMLHttpRequest debugging features that go beyond simply tracing (if an implementation is possible):
- log XHR interactions in a separate window/pane/div rather than the javascript console.
- in that interface, let users replay callbacks (maybe allowing to modify the response body).
- let users intercept (breakpoint) and modify requests and responses as they go .

Ah, that makes sense -- thanks for the clarification!

Sage, I'm still trying to repro this problem.
What OS and browser versions are you running?
Do you have any messages in the javascript console that might be related?
Thanks,

What is the url that is needed to be added to the greasemonkey script?

I am just starting out with greasemonkey and I tried with the following link
http://www.google.com/*

but the JS console shows no output

Julien,

I am using Greasemonkey 0.2.6 on Firefox 1.0.3. My OS is Windows XP. The javascript console didn't actually open.

Hey Sage. Same platform as me.
Do you mean the javascript console won't open at all? Did you try to open it via the "Tools" menu or some other way?

Makash, the main Google search page doesn't use XMLHttpRequest. Try Google Suggest instead, at http://www.google.com/webhp?complete=1

Sorry, a little confusion on my end. Anyway, I opened the JavaScript console, and when I use Backpackit it doesn't log anything when I try to add or delete items.
So, I added Feedmarker.com and sproutliner.com to the Greasemonkey script to try those sites. I get the following errors. In Sproutliner:
Error: GM_log is not defined
Source File: http://sproutliner.com/
Line: 149

And in Feedmarker.com:
Client_Error:ReferenceError:GM_log is not defined.

Sage, thanks for taking the time to troubleshoot this with me. I think that pinpoints the problem: you need Greasemonkey 0.3 and up. The GM_log function didn't exist before that.
I'll update the XMLHttpRequestTracing script to issue a warning when it detects an older version of Greasemonkey.
Sorry about that.

Glad to help!

Have you tried Fiddler www.fiddlertool.com

Re: Fiddler
I have used Fiddler tool and a number of other HTTP sniffers.

But they are not geared towards AJAX debugging. In particular, they know nothing about javascript.

The next version of the user script (coming soon) goes beyond simply sniffing, with some features that I think are useful for AJAX debugging.
Feature suggestions are welcome too :-)

I'm also thinking about integrating it with the javascript shell or the javascript development environment (see http://www.squarefree.com/bookmarklets/webdevel.html ).

im using gm0.3.3 + ff 1.04 and i installed the script, but now whenever i open any webpage, i get the following error message in the js console

Error: illegal character

if i disable your xmlhttp tracer script, i dont get the error.

very weird...

Thank you, Julien. This script has made my life so much easier.

Hi, can you explain how to install this? I'd love to try it but I'm new to Greasemonkey.

Thanks.

Me again - Okay, I realized the installation instructions were in the script :-). So it's installed. Next question: how do you use it?! When I bring up my javascript console I don't see anything happening... do I have to somehow call the script in my javascript?

Thanks again!

Beth, you need to configure the list of trigger urls for the script so that the script gets run on the pages you want to analyze.
Then you navigate to one of these pages and at that point you should see tracing information appear in the console.

Beth, you need to configure the list of trigger urls for the script so that the script gets run on the pages you want to analyze.

Just occasionally got here, but thaks for the script. A pretty neat tool.

Hi All,
Actually i have a question related to AJAX technology that I want to ask with all of you.

My question is: Can we update database values using Ajax? I have search over the internet but I haven't got any solution regarding upadting database values using Ajax.

I am ASP.NET Developer and looking forward for your suggestion regarding my question.

Thanks in Advance.

Anand, nothing prevents you from updating a database using AJAX.
With ASP.Net, you could use an AJAX framework such as Microsoft Atlas or AJAX.Net as the glue between your client-side javascript and your server-side C#.
But you still need to write C# code that does the database update, given some parameters passed from the client.

I just updated the script to run in Firefox 1.5 and Greasemonkey 0.6.4. Older versions are not supported anymore.

Thanks for this great post. You've got some really good info in your blog.
Adam Butler
http://www.tracingimprint.com

Great reading, keep up the great posts.
Peace, JiggaDigga