"XMLHttpRequest Tracing" for AJAX debugging · Curiosity is bliss

Curiosity is bliss    Archive    Feed    About    Search

Julien Couvreur's programming blog and more

"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.

Posted by: Sage (May 11, 2005 08:28 AM) ______________________________________

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

Posted by: Julien (May 11, 2005 08:42 AM) ______________________________________

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.

Posted by: Sage (May 11, 2005 08:54 AM) ______________________________________

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

Posted by: Adrian H. (May 11, 2005 09:48 AM) ______________________________________

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 .

Posted by: Julien (May 11, 2005 09:56 AM) ______________________________________

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

Posted by: Adrian H. (May 11, 2005 10:56 AM) ______________________________________

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?

Posted by: Julien (May 11, 2005 05:12 PM) ______________________________________

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

but the JS console shows no output

Posted by: makash (May 11, 2005 10:15 PM) ______________________________________


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

Posted by: Sage (May 12, 2005 07:20 AM) ______________________________________

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?

Posted by: Julien (May 12, 2005 09:27 AM) ______________________________________

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

Posted by: Julien (May 12, 2005 09:31 AM) ______________________________________

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.

Posted by: Sage (May 12, 2005 11:11 AM) ______________________________________

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.

Posted by: Julien (May 12, 2005 11:16 AM) ______________________________________

Glad to help!

Posted by: Sage (May 12, 2005 11:29 AM) ______________________________________

Have you tried Fiddler www.fiddlertool.com

Posted by: asdasd (May 19, 2005 04:23 AM) ______________________________________

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 ).

Posted by: Julien (May 19, 2005 10:26 AM) ______________________________________

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...

Posted by: steve (June 14, 2005 11:24 AM) ______________________________________

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

Posted by: Nathaniel (August 10, 2005 12:01 PM) ______________________________________

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


Posted by: Beth (November 8, 2005 09:31 AM) ______________________________________

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!

Posted by: Beth (November 8, 2005 09:59 AM) ______________________________________

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.

Posted by: Julien Couvreur (November 15, 2005 12:36 PM) ______________________________________

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.

Posted by: acura (December 7, 2005 04:24 PM) ______________________________________

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

Posted by: AJ (December 14, 2005 02:26 PM) ______________________________________

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.

Posted by: Anand (January 1, 2006 05:08 AM) ______________________________________

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.

Posted by: Julien Couvreur (January 4, 2006 09:24 PM) ______________________________________

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

Posted by: Julien Couvreur (January 13, 2006 10:51 AM) ______________________________________

Thanks for this great post. You've got some really good info in your blog.
Adam Butler

Posted by: Adam Butler (February 8, 2006 09:25 AM) ______________________________________

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

Posted by: JiggaDigga (April 7, 2006 09:39 AM)
comments powered by Disqus