Web developer extension

The Web developer extension for Firefox is an essential tool for web developers. It has too many functions to list them all but some of the most useful for use with Moodle development are explained below. Visit the web developer extension's homepage to download and install and for more documentation. Or get it from the Firefox Add-on page.

For CSS development

These functions are useful for anyone creating and debugging CSS:

• Disable Cache - this prevents Firefox from storing old versions of CSS files as you make changes
• Edit CSS - this allows you to make changes to the CSS and see the changes instantly. Great for exploring and testing.
• Display Element Information - show information about page elements, such as ancestors as you hover over them with the mouse.
• Display Id & Class details - displays all class and id names where-ever they are used.
• Enable only print style in normal view - useful for developing print styles.

For HTML development

These functions are useful when creating HTML code:

• Outline Tables/Headings/Deprecated elements - the outline function puts colored boxes around the elements you specify to make them easier to locate and work with.
• Validate local HTML - sends the HTML you are looking at to the Validator. Most Moodle pages are protected by passwords so validators cannot visit them, which is the usual practice.

For accessibility

See the Accessibility page for more tools.

• Replace images with alt attributes - lets you read what those with images unavailable or turned off will receive.
• Linearize page - shows the order in which audio or small screen browsers will present information

See also

• Development:Firebug for information about Firebug, another powerful Firefox extension for web developers
• Internet Explorer Developer Toolbar for a similar tool for Microsoft Internet Explorer
• "The Web Developer Toolbar Comes to Chrome"