A few days ago I stumbled upon a Firefox extension (now known as add-ons) called Firebug. It touted itself as a debugger for JavaScript which is cool all by itself. I installed it and quickly forgot it was there (very unobtrusive). Foolish me, I should have started using it right away, but I am getting ahead of myself here.
Today I saw this video and my jaw dropped. Finally, I can take the guess work out of debugging my JavaScripts (and, of course, I can take out all my debugging alert boxes our my code too). Finally, I have the tools for the front-end to know exactly what my DOM looks like (although, I have had the ability to see this before, it was never as polished as Firebug from looks of it).
From their website:
FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, error console, command line, and a variety of fun inspectors.
I will write more later about my experiences with Firebug after I take it out for a good spin on my next projects.
Stay tuned.