AJAX Debugging with Greasemonkey

Following up on my last Greasemonkey user script, "XMLHttpRequest Tracing", I wrote a new script that goes beyond tracing: "XMLHttpRequest Debugging".

Here is a screenshot of the new UI.
What it shows is the XMLHttpRequest debugging console, a floating div embedded in the page being debugged. This replaces the javascript console, which the previous script used for tracing.
Each individual XMLHttpRequest invocation will get listed there, with all the details on the request and the response, as well as options to edit and replay the request or replay the response callback.

Update: A newer version of the script is available.


The user script adds a menu command under "Tools" -> "User Script Commands" -> "Show XMLHttpRequest console". It is mostly useful if you click "hide" in the console menu.

The interface makes use of some cool scripts I've seen around, such as the fade anything technique (a variant of 37signal's yellow fade technique) and Aaron Boodman's DOM-Drag. I hope I didn't go overboard ;-)

Here are some possible future features I have been thinking about:

  • integrate with the Javascript Shell or the Javascript Development Environment, for richer debugging,
  • allow breakpointing on the response callback, to let the user modify the server response before the callback occurs,
  • use a popup window for the console, rather than a floating div,
  • ensure the console remains within the borders of the viewport
  • allow creating new XHR requests via a form, similar to the current edit&replay of requests.

I've tested it on a couple of AJAX-based sites. Except for Gmail, most seem to be working fine.

As with my other Greasemonkey scripts, feedback, suggestions and patches are welcome :-)

Update (2005/05/12): I just ported this script to IE, using a bookmarklet.

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

This ain't the most useful comment, but I just wanted to say: This is so freaking cool. :)

Posted by: Anil at June 1, 2005 12:17 AM

Just trying it out, and this is fantastic. Thank you so much.

A couple things - I hid the form on a page, and now I can't get it back. Second, on a page I've been developing, links update the debugger but don't call my own functions any more. Have you seen anything like this?

Posted by: Christopher at June 1, 2005 09:42 AM

LiveHTTPHeaders anyone??

Firefox/Mozilla: http://livehttpheaders.mozdev.org/
Internet Explorer: http://www.blunck.info/iehttpheaders.html

Posted by: David at June 1, 2005 09:56 AM

David, LiveHTTPHeaders is awesome and was discussed more in comments of the previous post.
The "XMLHttpRequest Debugging" user script tries to go beyond just tracing the headers: it traces the whole response body and it has debug capabilities (you to edit&replay requests with their javascript callback).

Posted by: Julien at June 1, 2005 10:49 AM

Christopher,
There is a menu to get the console back: "Tools" -> "User Script Commands" -> "Show XMLHttpRequest console".
I haven't run into the problem that you are describing. Can you check messages in your javascript console? Also, can you give me some more details on how your page uses XHR?
I'll follow up with you by email.

Posted by: Julien at June 1, 2005 10:56 AM

Anil, no feedback is wasted as far as I'm concerned ;-) Thanks for the kind comment. I'm glad this is useful to you!

Posted by: Julien at June 1, 2005 10:57 AM

Oh wow, this is going to make the lives of so many AJAX developers so much easier.

Posted by: Patrick Haney at June 1, 2005 12:46 PM

Great stuff.

I was wondering if you could add a z-index to the XHRDebug_Console to bring it above everything. It just fell behind some of the headers on some pages and then couldn't be dragged away.

Posted by: Josh at June 2, 2005 07:37 AM

Hi Julien,

Thanks for the tool.

Does this work with IE ?

We have a IE only AJAX app and we use proxyTrace for debugging the application. Some times, inserting proxyTrace (http://www.pocketsoap.com/tcptrace/pt.aspx) creates errors while talking to Tomcat. Hopefully, your tool does NOT have such issues.

BR,
~A

Posted by: Anjan Bacchu at June 2, 2005 11:30 AM

Anjan,
This tool unfortunately doesn't work in IE, because Greasemonkey is Firefox-only.

Some extensions similar to Greasemonkey are currently being developped for IE (TrixIE, Turnabout). But even then, I'm not sure the same technique can be used to intercept XHR calls in IE. The XHR invocation in IE is different: it uses an ActiveX object, instead of a native javascript object.
In order to intercept XHR calls in IE, you would have to modify your page to use an XHR wrapper, with some hooks for debugging, rather than the ActiveX object directly.

This script is a patch until full-fledged and integrated solutions appear, as this web app development approach becomes more popular.
I'm hoping that long term, mainstream IDEs and debuggers start supporting debugging javascript in the client and server code at the same time. That would be pretty cool ;-)

Posted by: Julien at June 2, 2005 12:04 PM

Very Handy. The fade effect makes it more intutive. Thx.

Posted by: Chanchal at June 2, 2005 07:33 PM

This is nifty but I think a local HTTP proxy is better served to fit this need. There are HTTP proxies designed for the purpose of debugging HTTP invocations.

Posted by: David Smiley at June 3, 2005 05:16 AM

i can't seem to get the script to work. or your other "tracing" script either. i installed them with Greasemonkey, then added some domains, but when I go to the Tools menu, the User Script Commands menu is greyed out. Any ideas?

Posted by: patrick at June 3, 2005 07:38 AM

This script generates a warning over here (Firefox 1.0.4):
Anonymous function does not always return a value.

It is an easy fix, I added:
return "";
To the end of "printReadyState" on line 547.

Posted by: Phil Harnish at June 3, 2005 10:38 PM

Thanks for the fix, Phil. I updated the script accordingly.

Posted by: Julien Couvreur at June 3, 2005 11:24 PM

Patrick, did you configure some websites to activate this user script?
When the script is installed, you need to pick a list of "include" url patterns, such as "http://*.backpackit.com/*". You need to input the url of the site you want to debug in that configuration panel.
I'll check with you by email.

Posted by: Julien at June 6, 2005 11:14 AM

Selenium is functional testing tool I developed to test and debug cross-browser and cross-platfrom Javascript (AJAX included). You might want to give it a try if you need to test in IE and Firfox and Safari.

Posted by: Jason Huggins at June 6, 2005 12:14 PM

Josh, I just added a z-index of 100 for the console. That should bring it above everything else.

Posted by: Julien at June 6, 2005 01:17 PM

excellent! had a hard time getting it working though -- the menu option remained grayed out. had to remove line 7 (which was just a comment and line break) which was producing a javascript error. Took out a few similar lines, too, so they may have also been error-producing.) now it works!

I'm interested in this primarily as a tool for writing a google maps GM script, though, and unfortunately the console doesn't display properly on that site. I'll look into what the problem could be when I have a chance, but perhaps you could take a quick peak and see if it's an obvious fix. I couldn't figure out from the UI how to move it, either, but perhaps that's because its top is obscured.

Posted by: tom at June 9, 2005 12:50 PM

I'm also having a problem with getting a grayed out User Script Command. Tom could you possibly post your modifications to the script?

Posted by: Richard at June 13, 2005 08:07 AM

Hey Bruno,
Are you getting any javascript errors from this script in your
Javascript Console?

Posted by: Julien at June 30, 2005 10:34 AM

Hi Julien,
No, I just was getting the greyed out menu item. It seems that when I installed the user script from your page, all I got was gibberish (maybe an encoding problem?). So I cut and pasted the text of the script and everything is working great. Thanks for a really useful tool!

Posted by: Bruno at June 30, 2005 10:37 AM

I tried to use this promising script only to get an error on line: 196 "GM_getValue is not a function"

I'm using gresemonkey 0.3.5 and firefox 1.0.6

Any suggestions?

Posted by: Christian at July 20, 2005 11:08 AM

Christian,
Per our emails, I updated the script to handle the security-related changes in Greasemonkey 0.3.5.
This script doesn't actually have a hard dependency on the GM_* functions, so I adapted it to handle that case and continue running nicely.

Thanks a lot for your help.

Posted by: Julien at July 20, 2005 04:07 PM

I've got the same problem as some users here, but with another script!

The menu "user script commands" is greyed out!

what can i do?

Posted by: Ramm at July 21, 2005 05:52 AM

Ramm, per our discussion by email, the problem is that you are using Greasemonkey 0.3.5.
That release is a security hotfix, which disabled all the GM_* functions such as GM_log or GM_getValue. That's why you're getting some GM_getValue errors in the Javascript console.

I would recommend that you wait for the next version of Greasemonkey, which should support these functions again, while being safe. Keep an eye on http://greaseblog.blogspot.com/

Posted by: Julien Couvreur at July 21, 2005 08:48 PM

You may also be interested in looking at:

http://tamperdata.mozdev.org

A

Posted by: Adam Judson at July 22, 2005 11:11 AM

In the intrest of more self-promotion, and now that I've read the rest of the other comments...

- using tamperdata you can use the view-source option to see the response from your request.
- seems to work fine with Gmail, though I haven't tested anything else.

A

Posted by: Adam Judson at July 22, 2005 11:25 AM

This is a cool tool. Thanks.

Posted by: Nick Skriloff at August 3, 2005 09:41 AM

thanks, good debugging tool

Posted by: emule at August 23, 2005 01:55 AM

Hi Julien,
No, I just was getting the greyed out menu item. It seems that when I installed the user script from your page, all I got was gibberish (maybe an encoding problem?). So I cut and pasted the text of the script and everything is working great. Thanks for a really useful tool!

Posted by: logiciels gratuit at August 28, 2005 11:57 PM

Very cool scrip!

For some strange reason the first few times I've tried this script on Start.com things worked. I could see and debug the ajax interaction. But after that the script wouldn't pop up anymore :(

Does anyone know why?

Posted by: Simon at September 30, 2005 05:28 PM

Cool,

How does one handle different ports?

I tried putting some * around like http://127.0.0.1*/* but that did not seem to work.

Thanks

Posted by: Serge at October 10, 2005 06:28 AM

is it just me or does this script *NOT* work with FF 1.5b2?

Maybe I'm just a dummy but my DIV appears but no debug data gets populated?

Posted by: vito9 at October 27, 2005 10:54 AM

Installed the script but it doesn't seem to work. With Google suggest the tracing window appears but I can't move it around and nothing appears in the window. The User Script Commands menu item of Greasemonkey is always greyed out so if I hide the window the only way to get it back is to reload a configured page (eg Google Suggest). FWIW I get a ton of JavaScript errors from Google Suggest.

Posted by: Michael Brown at December 8, 2005 09:29 AM

I have firefox 1.5. Alot of things dont seem to work correctly. I cant drag and drop the box, when I minimize the whole thing disappears and user script command option under tools menu is never available, when I hide it there is no way to bring it back. How can firefox javascript change that much.

Posted by: Andy at December 18, 2005 09:41 PM

Hi Andy,
The drag and drop problem is known. It doesn't actually come from Firefox, but from Greasemonkey (that changed it's injection model).
I didn't know about the menu problem thought, I'll check it out. I also suspect it's a problem with the latest version of Greasemonkey.

Posted by: Julien Couvreur at December 19, 2005 08:35 AM
Trackbacks
AjaxGreasemonkeyǥǥХå
Excerpt: Ƕä夤ƤAjaxǤѥäӤĤˤ桹񤷤㤨Хǥ...
Weblog: 7korobi8oki.com
Tracked: June 2, 2005 07:57 AM
AJAX Debugging Tool
Excerpt: Julien Couvreur has released an updated version of his Ajax Debugging Tool. The new script adds debugging features to the tracing greasemonkey script....
Weblog: Anticlue
Tracked: June 3, 2005 02:50 AM
All Kinds of Greasemonkey Goodness
Excerpt:

Short note: Two great developments are available that build on the Greasemonkey tool for the Firefox browser. Platypus allows you to modify a web page fro


Weblog: Bill Katz
Tracked: June 3, 2005 05:02 PM
Link Dump
Excerpt: A small and random collection of nifty things I've seen float past lately: The BBC is offering downloads of all of Beethoven's symphonies. Unfortunately, you need to pay attention to when they broadcast 'em, as the MP3s are only up for a few days after...
Weblog: Information Management Weblog
Tracked: June 3, 2005 05:24 PM
More Ajax
Excerpt: A couple things: Backbase now has a 'community edition,' there's a greasemonkey script that does ajax debugging, Multiple Text Applicator does ajax lists. Oh, and here's something i wished i had yesterday -- Live Http Headers -- This is a mozilla e...
Weblog: Emergent Properties
Tracked: June 7, 2005 08:20 AM
re: Ajax is just not for cleaning...
Excerpt:
Weblog: Eladio
Tracked: July 27, 2005 08:53 AM
XMLHttpRequest entkäfern
Excerpt: Für alle die sich mit XMLHttpRequest rumschlagen gibts hier ein tolles Greasemonkey Skript, dass einem in einem extra div Daten zu dem jeweiligen XMLHttpRequest-Anfragen anzeigt. Hier eine kurze Liste der Features: Anzeigen des Requestaufrufs Anfr...
Weblog: eskimoblood
Tracked: July 28, 2005 05:22 AM
AJAX debugging
Excerpt: Just found this very cool piece of script, basically it uses the Greasemonkey extension to firefox to replace the XMLHttpRequest object with a debuging version. The script appears as a floating div...
Weblog: Steven's blog
Tracked: August 20, 2005 08:51 AM
AJAX debugging
Excerpt: Just found this very cool piece of script, basically it uses the Greasemonkey extension to firefox to replace the XMLHttpRequest object with a debuging version. The script appears as a floating div...
Weblog: Steven's blog
Tracked: August 24, 2005 09:15 AM
Newer script
Excerpt:
Weblog: blog.dreampro
Tracked: August 24, 2005 02:37 PM
JavaScript/Ajax
Excerpt: Top / JavaScript / Ajax Ajax † ↑Online demo application † Backbase - Rich Internet Applications Zimbra ↑Related Links † Ajax: Web アプリケーション開発の新しいアプローチ bricklife.weblog.*: ...
Weblog: にこにこ風味::Wiki (PukiWiki/TrackBack 0.3)
Tracked: January 2, 2006 06:23 AM