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.

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

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?

LiveHTTPHeaders anyone??

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

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

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.

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

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

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.

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

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

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

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.

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?

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.

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

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.

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.

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

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.

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

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

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!

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?

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.

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?

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/

You may also be interested in looking at:

http://tamperdata.mozdev.org

A

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

This is a cool tool. Thanks.

thanks, good debugging tool

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!

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?

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

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?

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.

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.

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.