Debugging a website can be a difficult thing, especially if it is complicated in layout and function. Fortunately, there are tools that help greatly with this. Firefox is an excellent web browser, included in it are the options for "Add-ons". These add-ons are written by other users to be able to do things that the web browser does not do by itself. Today I will show off a web development Add-on called "Firebug".

Firebug is designed to help web developers and designers debug their sites. As a tool Firebug is very powerful and I will only brush the surface of this Add-on.

To download the Firebug add-on click the link or follow the directions. From the firefox menu you may also select "Tools" -> "Add-ons" -> "Get Extensions" then search for "Firebug".

What makes Firebug so nice is it lets you view all the source for the web page, view the CSS, view all Javascript, watch Javascript variables, view AJAX calls, and edit the CSS or HTML. What sets this add-on above others that do the same things is the powerful "inspect" button. Once clicked "inspect" turns on a mode where simply moving the mouse over parts of the website lets you see where in the coding each piece is referenced and also the styles used for that section.

It shows the coding in a nicely formatted view showing what you need and the surrounding context. There are many options for what information to display and how to display it.

For serious web developers this is one of the best add-ons available. For viewing and debugging web pages.