I’ve been using Unobtrusive Javascript techniques for awhile now and I recently introduced them into some of my client projects for OpenRain. Personally, I love UJS and find it much easier to write than using the Javascript Rails Helpers or onclick-style javascript, but some of my teammates have found UJS difficult to debug. And they’re right!
Up until now, I’ve enjoyed using UJS so much that I’ve overlooked its downsides, primarily how difficult it can be to debug. Take CSS for example:
- CSS is great because it separates a page’s styles from its content
- CSS is awful because it’s difficult to debug (as it’s separate from the content)
- CSS was tolerable to begin with but is great now because we have awesome tools to help us debug it!
Think about it. Today, we can right-click on any DOM element and see all of it’s styles and where they’re coming from. Before Firebug, we tolerated CSS. We knew it was better but it was often difficult to figure out were certain styles were coming from. The “solution”: override the cascading styles with new ones. That is, until Firebug.
Compare that to UJS. Using UJS, it can be difficult to figure out why, when you click on a link, it’s not going to the link’s href. Instead, because of some UJS events someone has added, the link is doing some crazy things when you click on it and you can’t figure out why!
Enter FirebugUJS
As a way to solve this problem, I figured … why not solve it exactly the way we do it for CSS? Right now, we can right-click on DOM elements and see all associated styles … so why not be able to right-click on DOM elements and see all associated UJS events? Now we can :)
I created a Firefox extension (a Firebug extension, to be precise), so we can easily see the UJS events bound to DOM elements by inspecting them.
So, it’s definitely not perfect yet but … release early, release often!
Right now, the extension should work with jQuery and (to some extent) LowPro. I’ll try to add Prototype support as well (sans LowPro) and, if I can figure it out, I’ll add native JavaScript support (for whenever someone adds an event listener to a DOM element).
To install, download the xpi from the github project and then File > Open the xpi in Firefox.
NOTE: Requires Firebug!
To use, right-click > Inspect Element and check the Events tab (see screenshot above)
Let me know what you think!