Many thanks to http://www.ajaxwith.com/Tips-in-Working-with-Firebug.html for sharing the knowledge with us.

Tips in Working with Firebug

Firebug is considered one of the essential tools for every developer whether they are working with JavaScript or not. It’s a simple add-on for Firefox but it can provide essential feedback for the application not normally noticed by the naked eye. It pinpoints small errors in your site which might not really change the looks of your online application but it could change the way it behaves. Simply put, Firebug could help your application improve by noticing the small things. Optimization has never been simpler with Firebug. Plus it’s free.




When working with Firebug, there are a few tricks you need to do to make sure you get the best out of the add-on. Here are some of those tricks:

console.log(“phrase here”) is your hero -- the function console.log is the most important function you can add to your online application. Before console.log() developers used to implemented alert() in their code so that they could receive notification when something is wrong or something has to be tweaked.

But here’s another trick – don’t just use “hello” as your phrase. Think of something that will really catch your attention. Add a phrase from your favorite movie line or anything out of the ordinary. You’re still tweaking your code so you can still have fun with it.

console.log is not the sole function for firebug – although the console.log () is the most important function for firebug, it’s not the only one that can help you improve your online application. Consider the following functions:

* console.info
* console.warn
* console.error

These functions can be used to create a “threat level” for errors in your application. This way, you’ll know if you really have a big problem or just a minor tweak in your application. Again, you can use quirky phrases so that it could get your attention immediately.

The tricky part of these functions is that it will have trouble detecting problems for IE. What you need to do is to use a different version of Firebug. Instead of a full version, use Firebug Light. It’s a lot smaller and simpler compared to the full version but could help you detect the troubles in IE while using these functions.

Using console.time or console.timeEnd

Another function that could help you monitor the loading time of your online application is the console.time and the console.timeEnd. These functions can be added to different functions so that you can be informed if there is something wrong with the function or it will not load as fast as expected. It works like console.log() and other console functions but specifically designed to monitor the loading time of a function.


After running firebug in your application, be sure to remove them before going live or releasing your site for public use. Anyone with firebug can read your source code if you don’t remove these functions. Other than this small precaution, Firebug will work wonders in your online application as it comes with different functions to monitor the activities of your website.