I have always been a fan of integrated debuggers.  They really help me think about tricky bits of code and verify that my solution is correct.  While testing my code I like to use a debugger to watch all my variables and boolean conditions.  Sometimes during a walk through like this I will see some problem with a variable value that isn’t manifesting to the user with any of my chosen test cases but could occur in the real world.

With JavaScript becoming a larger and larger part of my code base it’s not as easy to do this.  There are some great tools that help with debugging JavaScript, and my go-to tool is FireBug.  It seems to do nearly everything for client side debugging: DOM inspection, source viewing, line by line JavaScript debugging, etc.   90% of the time it does what I need. 

There is one place that I have had trouble though:  Finding what bit of random JavaScript has been dynamically bound to the DOM.  Often the code that binds an anonymous function to some element wasn’t even loaded with the page but was pulled in later due to a dynamic condition.  I am very happy to have found a tool to help with this: Visual Event.  It works by highlighting on the screen all the elements that have JavaScript bindings. When you hover over the element you can even see the code that is bound to it.

Here is what it looks like when I run it against the front page of NITRC:

If you run into some code using a lot of client side JavaScript magic, give it a try and see what you think.