NOTE: this post is very likely out-of-date. Please keep this in mind when considering this article.

I have worked with a lot of web development tools, but Firebug blew me away. Firebug is an extension for Firefox used for debugging and optimizing CSS, JavaScript, HTML…and more.

There are a few things that a lot of developers don’t know about Firebug that I would like to share with you today.

  1. You can monitor the load time of your JavaScript by going to the “Net” tab. Bonus: Firebug colors requests that are served from your cache in a lighter gray so you can optimize your cache use.
  2. Right click on a breakpoint to add a condition.
  3. Using console.log to print messages to the console is great, but did you know you can group messages by calling ‘“groupname”)’ and ‘console.groupEnd()’?
  4. Use console.profile() and console.profileEnd() to report on time spent in each function hit, or you could just use the Profiler.
  5. If you mouse over a color in the CSS tab, it shows you a swatch of that color!
  6. Not only can you see the HTML of your page change in real-time, you can change it whenever you want.
  7. If you are using a very high resolution and Firebug is hard to read, just click on the bug and select ‘Text Size > Increase Text Size’
  8. You can use the command ‘debugger;’ within your JavaScript to have Firebug stop execution at that point in the code and bring up the Firebug panel.
  9. Log calls to specific function by simply right clicking the function name in the Script section and choosing: ‘log calls to “myFunction”’.
  10. FINALLY…you can use Firebug in IE, Opera, and Safari (limited functionality) by downloading Firebug Lite!

Now if you still don’t intend to use Firebug, then you must have spent a lot of money on something that probably isn’t much better.

Posted on under firefox