AJAX applications can get hard to debug. Recently developing FriendsFeedMe I got to the point, where I had three AJAX calls called in sequence (by onScuccess callback). More, this could happen in multiple instances in parallel. Well… it was messy, but was just working, so I did not clean up it without need (don’t fix if it is not broken!).
But time has come, when, after code update something started to be wrong. And bug was happening only when AJAX sequences were called more than two at one time. Debugging such a complicated (well I should just say – messy) setup it is real nightmare. Standard tools, like Firebug are not enough, since classic breakpoints and step by step approach fails, when bug is visible only in dynamic environment, when a lot is happening in short time.
So what left out? Clean up code? Right, but when it is not easy task, You may try other approach. Logging. You need some good debug output, and dump application state to this channel. And here comes Google Maps API with help. One of its components is GLog namespace, which provides nice logger.
Just go to Google Maps API website, register API key for Your app, and include Google Maps API library. Now You can use GLog.write to write messages to logger. When first message will show up, GM API will create new div on current page which will contain all messages sent using GLog namespace. Logger provides timestamps, div with logger has scrollbar and is movable. For HTML formated output You can use writeHtml and for URLs writeUrl. Equipped with such tool You can approach debugging some asynchronous JavaScript calls.
I did just code cleanup and use simple solution instead of debugging mess I had, but if You insist…
Why didn’t you just use Firebug (for firefox) and Firebug Lite (for everything else)?
And firebug\’s console.log() didn\’t do the job?
@masklinn: Firebug does not help when bug shows its result only when user fires up few AJAX calls in parallel, classical approach of breakpoints and step by step execution fails – since bug was caused by some dynamic relationships between objects
@Bosshog: console.log() does not provide timestapms by deafult and what is important IMO having separate div with debug output is much more convenient.