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
I did just code cleanup and use simple solution instead of debugging mess I had, but if You insist…