Download: Firebug for Firefox

Finding bugs in web  pages can be a tricky business. Now that a single page can be made up of information from many different files just looking at the page code is often not much help. Firebug is packed with tools that make it easier to understand what is going on and can even be used to make changes on the fly to find fixes.

Read more: Web design downloads

Installation is simple and Firebug appears as a small icon with, appropriately enough a bug, to the right of the Google search bar at the top of the Firefox Window. Clicking on this button will make the main Firebug interface appear at the bottom of the Firefox window. We were very pleased to find that Firebug doesn't require a restart of Firefox to complete the installatin.

There are tabs for revealing the HTML, CSS, script and DOM of the current page. The first two are the content and styling. The script tab shows javascript and other languages used to manipulate the page.

DOM stands for Document Object Model and is a way of identifying and accessing every part of the web page

One of the cleverest tools in Firebug is that you can not only view the code used to build web pages but edit it and see the changes in real time. This radically speeds up the process of fixing errors, especially those odd formatting problems that can be hard to track down.

It won't leave you to find errors yourself as it will list all the errors found in a page. It will show the file containing the error and the line number of the command in question. Errors are only shown for the page currently being looked at, which will help keep the list managable if there are several tabs open. Finally errors can be filtered so you can exclude CSS errors if it's the Javascript that you're trying to fix.

Cookies can be examined and edited. Firebug can launch its debugging tool if a specific cookie is changed and show you which line of script made the change.

Firebug can show exactly how long every part of a webpage takes to load. Load times are very important for the popularity of a site and this can be a critical test.

There is one limitation with Firebug, which is that it will only debug problems encountered in Firefox. This isn't really Firebugs fault, but do remember that just because something works in Firefox doesn't mean that it will work in other browser. This should be just one part of the testing process.

Opera has the Dragonfly tool built in, which can be accessed by pressing Ctrl, Shift and I. This has a similar selection of features including live editing of code.

Google Chrome has developer tools that can be accessed by clicking on the spanner icon in the top right, then Tools and then Developer Tools. Or you can press Ctrl, Shift and I as in Opera.

Users of Internet Explorer 9 can press F12 to access its Developer tools, which set the browser to run in different modes for all the different versions of Internet Explorer since version 7.