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.

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.

For HTML development

These functions are useful when creatingHTML 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 also the Accessibility extension for Firefox, and 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