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

Posted by Julien on May 10, 2005. Permalink
Comments
comments powered by Disqus

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

Posted by: Sage at 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?
Thanks,

Posted by: Julien at 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 at May 11, 2005 08:54 AM

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

Posted by: Adrian H. at 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 at May 11, 2005 09:56 AM

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

Posted by: Adrian H. at 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?
Thanks,

Posted by: Julien at 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
http://www.google.com/*

but the JS console shows no output

Posted by: makash at May 11, 2005 10:15 PM

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.

Posted by: Sage at 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 at 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 at 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 at 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 at May 12, 2005 11:16 AM

Glad to help!

Posted by: Sage at May 12, 2005 11:29 AM

Have you tried Fiddler www.fiddlertool.com

Posted by: asdasd at 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 at 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 at June 14, 2005 11:24 AM

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

Posted by: Nathaniel at 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.

Thanks.

Posted by: Beth at 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 at 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 at 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 at December 7, 2005 04:24 PM

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

Posted by: AJ at 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 at 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 at 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 at January 13, 2006 10:51 AM

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

Posted by: Adam Butler at February 8, 2006 09:25 AM

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

Posted by: JiggaDigga at April 7, 2006 09:39 AM
Trackbacks
Fun with JavaScript
Excerpt: Two links to interesting stuff with JavaScript. The first one is a Greasemonkey user script that lets you trace XMLHttpRequest queries. This is useful for developing AJAX enabled Websites. For more fun with AJAX watch out the coming version of Ruby on Rai
Weblog: BlogFish
Tracked: May 12, 2005 05:18 AM
All the cool kids are talking about AJAX
Excerpt: It seems that everywhere I look today people are talking about AJAX. For a variety of reasons, web apps...
Weblog: John Lawrence (MSFT)
Tracked: May 24, 2005 06:15 PM
.::Szőkelizer 171::.
Excerpt:
Weblog: RIO - Randektív Informatikai Oldal
Tracked: May 25, 2005 09:11 AM
.::Szőkelizer 171::.
Excerpt:
Weblog: RIO - Randektív Informatikai Oldal
Tracked: May 25, 2005 09:12 AM
Ajax: A New Approach to Web Applications
Excerpt:
Weblog: Xander's Blog
Tracked: July 18, 2005 01:28 PM
Ajax: A New Approach to Web Applications
Excerpt:
Weblog: Xander's Blog
Tracked: July 18, 2005 01:45 PM
Greasemonkey 0.5 Beta
Excerpt:
Weblog: blog.dreampro
Tracked: August 3, 2005 09:02 AM
【Ajax】"XMLHttpRequest Tracing"
Excerpt: "XMLHttpRequest Tracing" for AJAX debugging http://blog.monstuff.com/archives/000250.html スクリーンショット http://blog.monstuff.com/archives/images/XMLHttpRequestTracing-Screenshot.jpg HTTPリクエストの履歴を見られるようにす...
Weblog: JavaScript++かも日記
Tracked: October 10, 2005 08:30 PM