Custom event logging for Javascript frameworks

Question

Imagine I have a web application with nice components coded up with your favorite Javascript library. I make heavy use of custom events to reduce the dependencies between these components so you can easily place them in multiple contexts, repeat them on the page, and/or nest them as I see fit.

This is a lovely picture, but debugging can be quite a pain, as I haven't found a way to do logging of my custom events. Ideally, I would like to be able to turn on logging in my framework of choice (I use Prototype, currently), and then get a running log of fired and observed events at any point or points in the DOM.

I've been discussing this with other F2E's and a few approaches have been tried:

• Visual Event is a bookmarklet that does a good job of visualizing where events are bound, but doesn't offer a runtime log.
• Antenna Is just such a log, but seems a bit buggy and requires modification of the prototype library itself, which feels like a hack.

How do I go about getting the custom logging I want?

Answer 1

You probably using some X.fireEvent method which is (probably-not familiar with your FW) defined in the Object.prototype. I would investigate the approach to override this one method with your version which will do the log stuff.

Answer 2

If you're using Prototype, I would wrap a logging function around document.fire.