I have mentioned Firebug before, which is an extension to Firefox that allows you to do some incredible things with Javascript, HTML, and CSS.
One of the more powerful things it does is let you set breakpoints in your javascript. A breakpoint is a debugging tool that causes the script execution to stop at a specific line in your code so that you can examine the state of the script at that point, and potentially change values. I think that if you’ve never used breakpoints in your development before, then you’re really crippling yourself in terms of how you debug. The problem seems to be that nobody really teaches this skill.
So I’ve put together a beginner’s-level tutorial screencast of how to use Firebug. It covers the basic use of breakpoints, inspecting variable values at runtime, changing the values of HTML and CSS at runtime, and a few other neat Firebug goodies. It’s not comprehensive, but it does give a pretty good introduction to what you can do with Firebug, and I think that anyone who develops on the web that doesn’t already use it will benefit from it. I’m really shocked by the number of seasoned web coders I’ve met that don’t use this tool - it’s too handy.
There are a few small technical errors in the tutorial that I should mention. The first is that when I hover over $(‘clickme’) in the javascript source, that value isn’t really interpreted by the javascript processor in Firefox. Instead, Firebug has its own way of interpreting that shortcut for document.getElementById(). You can see this because jQuery (as I explained in the tutorial) would not return anything for $(‘clickme’), and yet Firebug seems to come back with the correct element even though the syntax is wrong.
This is because Firebug interprets the $() function itself, and it like the Prototype syntax where the parameter passed to $() is an id, not a CSS selector. In any case, that part might have been a little confusing, which is why I mention it. What I probably should have tried is executing the $(‘clickme’) in the Console or adding it to the watch window.
Anyway, I hope this is useful to the community at large, and leads to faster, cleaner code.
