Examine and test webpages with Web Developer Toolbar

It doesn't take long to realise that designing websites means a lot of testing, especially if pages don't appear as they should.

The Web Developer Toolbar for Mozilla Firefox is an invaluable tool for testing and can also be used to learn how other websites work.

As a Firefox plugin, it hardly takes any time to download and install. An option not included in the default installation is to include a button for Web Developer in the main toolbar to turn it on and off quickly.

The Toolbar can toggle different elements of the web page such as CSS (a technology for formatting webpages) to see the effect it has on the page. The CSS file used by the page can be edited with the changes applied to the page. This does not change the actual site.

The browser window can also be resized to see how a webpage looks on computers with lower resolutions.

The tools menu has links to websites for making sure that the webpage follows the rules of the internet. Reports can also be generated on the total size of the page and any potential problems.

One of the most useful tools is the Element Information option in the Information tab. Once selected it shows a summary of any element that you click on including images and divs. This is invaluable for tracking down problems with web pages and answering the regular question of where to find an element in the code.

Version 1.1.9 added support for Firefox 4.0, though we've been using it on Firefox 11 without any problems, and fixed various other problems.