“What is Firebug?” you may ask. Firebug is an extension for Firefox used for debugging and optimizing CSS, JavaScript, HTML…and more. Firebug is an excellent Firefox browser extension that is great for troubleshooting, editing, monitoring, and debugging. It is free and open source.
10 things about firebug
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”‘.
You can use Firebug in IE, Opera, and Safari (limited functionality) by downloading Firebug Lite!!
Net, CSS, and DOM Tabs by Michael Sync (at the bottom of this article you will find an index of all the article that Michael has written about Firebug).
