If you’re a front-end web developer, you’ve probably already heard or read about FireBug, a revolutionary new way to debug your JavaScript. If you haven’t yet, you’re definitely missing out, so forget about reading this post and head straight to Joe Hewitt’s site and install this wonderful Firefox extension.

So what’s all the hype? FireBug introduces some really powerful and convenient debugging tools right into Firefox, including a Console to which you can send valuable information as your script executes and a Debugger which can actually pause your script and allow you to follow it line by line and see exactly what’s happening to the variable and processes in the current scope.

I had a pleasure of seeing Joe Hewitt speak today at Yahoo! and he gave us some insight into the more hidden features of his creation. One of the more interesting things is that Joe has never actually met someone that has used his tool to aid in web development. Joe Hewitt is simply a man who saw a problem and came up with a wonderful solution for it. Someone from the audience shouted out, “Give this man a medal!,” and if you’re a web developer dealing with a lot of JavaScript, you will definitely agree.

Some cool tips and tricks from Joe

Below are some cool tools, features, etc.

• Creative use of timers to measure execution time of any process (ex. console.time(”test”); to start and console.timeEnd(”test”); to end the timer.
• Pause button in the Debugger window will … pause the execution of the script and you can evaluate currently used objects and variables as well as change them in the Console if needed.
• Event monitor: you can filter it to only tell you specific events such as “keydown.”
• Ctrl+Shift+C: shortcut to the Console.
• F12: shortcut to toggle FireBug.
• Ctrl+Click or middle Click: opens up links, images, etc. in a new Tab.

Issues

Obvious issue that comes up is: How will IE handle console commands, such as console.log(”Script started”);?

Joe Hewitt was talking about writing a JS file that will define the console object, so IE won’t spit out an error. Whether it will simply not do anything or actually have a good use (ex. print out to a div) is unknown, but hopefully Joe will come up with something creative.

There’s also a rumor that if you install the IE tab extension in FireFox (that loads IE in a FireFox tab) and have FireBug installed, it will actually debug pages loaded in that IE tab. I’ve yet to confirm this.

P.S. Definitely check out FireBug’s Inspector. It will make you rethink ever using the built in DOM Inspector.