Web development can be… well… a pain sometimes. Especially if you are creating dynamic web pages with Javascript and CSS. Thankfully there are some tools out there to make your life easier. I’ll delve into a tool specific to Firefox called Firebug in this article.

Firebug is a Firefox plugin that can be installed by searching the Tools->Add-ons interface. After installing the plugin and restarting your browser as instructed, you’ll notice a little green icon (or bug) in the bottom right of your Firefox browser. Simply click on it to bring up Firebug and enable it.

You’ll notice 5 main parts to Firebug:

Console - Javascript debugging console. Convenient way to view errors in your javascript, including the line and file the error occurred.

HTML - HTML of current page. What is really cool about this is that unlike right clicking the page and selecting view source, you can also see changes to the HTML that happened dynamically since the page loaded.

CSS - All the styles loaded for the current page. Including external CSS files.

Script - All javascript loaded for the given page. Including external Javascript files.

DOM - DOM layout / overview.

Net - Tracks request, their status, and how long it took to load each one. (ajax calls, images, css, js, etc…).

Additionally, there is an “Inspect” option that allows you to mouse over the website and automatically outline and display information about the current element your mouse is hovering over. All of the client side aspects of the site can be edited on the fly as well, with immediate results reflected in the browser.

There are quite a few more features available in Firebug, but I’ll let you find those out on your own. I hope this little tip has been useful. I know Firebug has helped me a great deal.

For more information:

http://getfirebug.com/ - Special thanks to Joe Hewitt and the Firebug group.