Firefox Web Developer Extensions | 3

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!