When an app reaches a certain level of complexity, particularly with regards to JavaScript, you’re probably going to have events bound and triggered all over the place. Events are a powerful thing, but they can be a bitch to debug.

This didn’t use to be the case. Back when we were all setting events inline, all you had to do was look at the HTML to know what events are bound to to an element:

<form onsubmit="if (!validate(this)) return false;">...</form>

I’m going to give you the benefit of the doubt that you’re not doing this anymore. I’ve been writing (and evangelizing) unobtrusive JavaScript for years now, but I have to admit this is one aspect of inline event handling that I really miss.

Take this scenario:

You’ve given a form a class of “ajax”, and you’ve got the following jQuery in place to make sure that all forms with a class of “ajax” are submitted via Ajax.

$('form.ajax').ajaxForm();

Unfortunately, when you try to submit the form, nothing happens. Nothing at all. No Ajax. No form post. No errors.

What do you do?

In the past, I’d start sticking console.log statements in my JS, or maybe debugging directly in Firebug. Recently, though, I found a better way. I was fumbling my way through the event code in jQuery, and I discovered that event data is easily accessible through the element itself. Here is how a Firebug session might look as I dig into these events:

The first thing I do is grab the form element, and see what it has in the “events” data (if you’ve never messed with the data() method before, you should ). I see that there is at least one handler assigned to the “submit” event, so I iterate through each of them and call toString() on each function so I can see the actual code.

The second function listed is the actual code for the ajaxForm() method, so it’s cool. The first one, though, is the culprit I’m looking for. This handler is being bound to my form’s submit event somewhere, and it’s calling stopImmediatePropagation() which prevents any other handlers from being called. Then it’s just a matter of searching for that exact code in the project, removing or fixing it, and beating the developer who put it there (which is usually me).

I admit this is not as easy as glancing at the HTML and seeing the event handler code inline, but it at least gets the job done. Any other tips for debugging events, please share in the comments!