Ajax Basics Tutorial (5)-5.6 Web development extensions using Firefox

Firefox's web development extension adds a lot of useful web development tools to the Firefox browser. Once this extension is installed, you can access the tools added to the browser using a toolbar (see Figure 5-14). This expansion pack is available on all platforms that are currently capable of running Firefox, which means that the expansion pack can be used successfully in Windows, OS x, and Linux. Firefox's Web development expansion pack can be obtained from chrispederick.com/work/firefox/webdeveloper/.

Figure 5-14 Web development extension to Firefox added toolbar

The Web Development expansion pack provides at least 80 separate tools to accomplish, from converting a GET request to a POST request (or vice versa) to a variety of tasks that allow you to dynamically edit a page's CSS rules. Because there are too many tools available, it is not easy to list them, but the following lists the total types of tools:

The Disable menu disables some features of the browser, such as JavaScript, CSS, cookies, and animated pictures.

CSS menus contain tools related to CSS rules and style sheets.

The Forms menu is used to convert a GET request to a POST request (or vice versa), to automatically fill out form values, and to delete the maximum length of an INPUT element.

The images menu is used to display thumbnail images or hide pictures.

The information menu is used to examine various information related to the page, such as cookie information, link information, and response header.

The Miscellaneous menu provides tools to empty the browser's cache, history, and session cookies, and to zoom in or out of the page.

The outline menu is for outlining tables, table cells, frames, block-level elements, and so on.

The Resize menu displays the size of the current window in the title bar, as well as other tools that can adjust the current window size.

The Tools menu is used to find quick links to third-party Web sites that validate CSS, HTML, and download speeds.

The View Source button makes it easy to view the source code for the page.

The Options menu is used to customize the colors, shortcuts, and behavior of editing web development extensions.

Some Web developers have praised the tools and capabilities of the Web Development expansion pack as "indispensable", "best" and "critical". You can install this extension and try a variety of tools to see if it will help you with your development and debugging processes.

Back to "Ajax Basics Tutorial-Directory"