AJAX Debugging with Greasemonkey · Curiosity is bliss

Curiosity is bliss    Archive    Feed    About

Julien Couvreur's programming blog and more

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

Posted by: Anil (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 (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 (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 (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 (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 (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 (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 (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 (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 (June 2, 2005 12:04 PM) ______________________________________

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

Posted by: Chanchal (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 (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 (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 (June 3, 2005 10:38 PM) ______________________________________

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

Posted by: Julien Couvreur (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 (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 (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 (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 (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 (June 13, 2005 08:07 AM) ______________________________________

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

Posted by: Julien (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 (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 (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 (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 (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 (July 21, 2005 08:48 PM) ______________________________________

You may also be interested in looking at:

http://tamperdata.mozdev.org

A

Posted by: Adam Judson (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 (July 22, 2005 11:25 AM) ______________________________________

This is a cool tool. Thanks.

Posted by: Nick Skriloff (August 3, 2005 09:41 AM) ______________________________________

thanks, good debugging tool

Posted by: emule (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 (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 (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 (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 (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 (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 (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 (December 19, 2005 08:35 AM)
comments powered by Disqus