Firefox Web Developer Extensions | 3

[previous]

Firefox Web Developer Extensions

JS Console Filter

Firefox comes with a built-in JavaScript console. Here, errors, warnings, and messages can be displayed. This extension, developed by Annie Sullivan, adds the ability to filter those messages in the JavaScript console by source file. Clicking on a warning or error highlights it in the associated JavaScript, whether it's in the Web page or an external file. This extension makes it much easier to locate errors and possible problems.

Web Developer Toolbar

This extension is the granddaddy of all the Firefox Web Developer extensions. Created by Chris Pederick, it's designed to handle dozens of Web development-related chores. There are ten categories covering a wide range of tasks, which are: Disable, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize, Tools, and View Source.

Disable
These tools are used to disable various actions on the page, such as image and image animations, Java and JavaScript, popup blocker, and CSS (you can choose between disable all, embedded, inline or linked styles). You can also disable referrer logging, page colors, cookies and the browser cache.

Forms
This category can be used to manipulate forms. Among other things, you can convert GETs To POSTs and vice versa, display the form method and action as well as all the form element's IDs and names for all forms. You can also convert form fields from read-only to writable, populate all form fields with their name as their value, remove any maximum length restrictions on all form fields and show all passwords as text.

Images
Using these tools you can manipulate and gather information about all the images on a page. You can display the width and height of all images on the page, display their paths, hide all of the images and much more.

Information
Use these tools to gather all kinds of information about the current Web page, such as access keys, anchors, ID and class of all elements on the page, link paths, cookie information, and display all the JavaScripts, whether they are inline or contained in external files.

Miscellaneous
This is where the tools that don't fit anywhere else are located, such as the ability to clear the browser cache, history, and cookies; open the DOM Inspector and the Java and JavaScript consoles and display all the comments on the page. There are also several other tricks in this category.

Outline
This section will outline elements on the page, such as block level and deprecated elements, links without title attributes, tables and table cells. There is also the capability to add your own custom elements.

Resize
This is a nifty little addition. You can use this to resize your browser to see how a page looks in different size browsers. You can even add your own sizes.

Tools
This section should be called 'Validation' as it cover all types of validation for Web pages, including: CSS, feed, HTML, links, Section 508 and WAI. It also validates local CSS and HTML pages on your hard drive. The extension doesn't do the actual validation. These are actually links that send your page to several popular validators. The links can be changed within the options. There's also a link to a speed report for a page using the Web Site Optimization service.

The extension also has a "View Source" option for viewing the source of the current page in a popup, chromeless window. In addition, there is a wide array of options that can be set by the user.

Installing Extensions

The extensions can be installed by visiting the Web pages listed above and clicking on the download link. They can be installed directly into the browser, right from the Web site. You will need to restart Firefox for them to take effect.

Conclusion

As you can see, there are many extensions that can be used with Firefox, making it truly a Web developer's browser. I'm aware of other extensions; if you use them, let me know and I'll group them together for others to use. Have fun!

[previous]

Created: September 30, 2005

URL: