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.
- 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.
- Right click on a breakpoint to add a condition.
- Using console.log to print messages to the console is great, but did you know you can group messages by calling ‘console.group(“groupname”)’ and ‘console.groupEnd()’?
- Use console.profile() and console.profileEnd() to report on time spent in each function hit, or you could just use the Profiler.
- If you mouse over a color in the CSS tab, it shows you a swatch of that color!
- Not only can you see the HTML of your page change in real-time, you can change it whenever you want.
- 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’
- 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.
- Log calls to specific function by simply right clicking the function name in the Script section and choosing: ‘log calls to “myFunction”’.
- 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.