Quick Ajax Debugging Tip

This post is more than 2 years old.

Ok, so this has been bugging me for the past few hours so I thought I'd share a quick hack. I've got a prototype I'm working on for a client that has a bit of Ajax in it. My Application.cfc code comes from a snippet I have in ColdFusion Builder and has the following onError:

<cffunction name="onError" returnType="void" output="false"> <cfargument name="exception" required="true"> <cfargument name="eventname" type="string" required="true"> <cfdump var="#arguments#"><cfabort> </cffunction>

Short and simple. An ugly dump is fine for testing. However, when an Ajax called was made, Firebug displayed a butt load of HTML (the dump) and it was difficult to find the exact message. I just changed it to the following code and it was incredibly helpful. Still not something I'd recommend on production, but I may change my snippet to support this:

<cffunction name="onError" returnType="void" output="false"> <cfargument name="exception" required="true"> <cfargument name="eventname" type="string" required="true"> <cfif structKeyExists(url, "method")> <cfoutput> message=#arguments.exception.message# detail=#arguments.exception.detail# </cfoutput> <cfabort> <cfelse> <cfdump var="#arguments#"><cfabort> </cfif> </cffunction>

Basically, if method exists in the URL, assume it's Ajax. (I could also check the headers, as described here.)

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Sean Coyne posted on 8/11/2009 at 12:23 AM

What I have done is onRequestStart delete the onError method if its an ajax request. This way if an error is thrown you can use your javascript error handlers. If onError catches the error, your JavaScript doesnt see it as an error. It sees it as success and the data returned is your output from your error handler. So if you are using cfajaxproxy and an errorHandler callback it will never fire.

Comment 2 by Gerald Guido posted on 8/11/2009 at 12:44 AM

Another way to do it is right click on the URL in FB and select "open in new tab".

Huh... now that I look FB has a tab called HTML next to the Response tab that renders the HTML....

Very cool. Firebug V 1.42 BTW. It must be a recent update because I have never seen it before.

Comment 3 by Raymond Camden posted on 8/11/2009 at 12:47 AM

Yep, I've seen that, but it seems to only work with certain content types in the response.

Comment 4 by Will B. posted on 8/11/2009 at 1:36 AM

Another couple thoughts.
1. My Firebug has a JSON tab in the little tabs that go with the Net request area. Can't beat that! Looks like a CF dump of a struct. (I also return the exact same structure all the time: success (boolean), message (string) and data (depends on what's going on, like a record set). Assuming your return is JSON, I guess Firebug detects that.
2. If you *happen* to be using jQuery's ajax calls (can't imagine living w/o them), there is a header on the Coldfusion side that will contain something like:
headers['X-Requested-With'] eq 'XMLHttpRequest'
(I use Coldbox, so I have that in one of my interceptors, that then sets rc.isAjax = true, which is then available throughout my request.)

Comment 5 by Raymond Camden posted on 8/11/2009 at 1:38 AM

@WillB: Yep, I mentioned x-requested-with in the linked too article - and it's not just jQuery. Other frameworks do it too - which is kind of nice.

Comment 6 by Andrew Scott posted on 8/11/2009 at 2:18 AM

It should also be noted that this would be a great example on when to use line debugging, setting a break point would actually help locate the offending code as well.

Comment 7 by Raymond Camden posted on 8/11/2009 at 2:27 AM

@Andrew - true - but in most cases, this mod would show me the error right away and remove the need to add a break point. ;) Again - this was meant as a 'quicky' debug, not a deep debug.

Comment 8 by Andrew Scott posted on 8/11/2009 at 4:39 AM

@Ray - True, just wanted to let others know that there is another option. And now that CFBuilder is out in the wild, they might like to experiment with that option as well.

Comment 9 by Raymond Camden posted on 8/11/2009 at 5:01 AM

Yeah, and you know what - not enough people make use of the Debugger. I don't for sure. Thanks for bringing it up.

Comment 10 by Gary Fenton posted on 8/11/2009 at 6:06 AM

In Firebug 1.4.2, from the Net tab you can right-click on the ajax called URL and select "open response in new tab". This opens a *cached* and html rendered page showing the CFML generated error message, cfdumps, etc.

You can't refresh that tab after fixing the error because it's just a cached copy of the response from the server. Firebug just gets better and better!

Comment 11 by Pritesh posted on 10/10/2009 at 7:55 AM

Generally what I am doing is right click on URL and open in new tab and it works for me. In case I have as post variable then right click on URL in FB and "Copy URL with parameters" and paste it into URL but in this case in target page I generally append URL variables to POST using structAppend(form,URL,true) at top of the page.