Web developer extension - Revision history

Andrewnicols: Note about plan not to migrate this page to the new developer resources. See template for more info.

2022-04-19T12:23:20Z

Note about plan not to migrate this page to the new developer resources. See template for more info.

← Older revision		Revision as of 12:23, 19 April 2022
Line 1:		Line 1:
			{{obsolete}}
			{{Template:WillNotMigrate}}

	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 [http://chrispederick.com/work/webdeveloper/documentation/ web developer extension's homepage] to download and install and for more documentation. Or get it from the [https://addons.mozilla.org/en-US/firefox/addon/60 Firefox Add-on page].		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 [http://chrispederick.com/work/webdeveloper/documentation/ web developer extension's homepage] to download and install and for more documentation. Or get it from the [https://addons.mozilla.org/en-US/firefox/addon/60 Firefox Add-on page].

Nakohdo: /* See also */

2011-06-24T12:05:03Z

Deraadt: Created page with "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 Moo..."

2011-06-16T07:24:02Z

Created page with "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 Moo..."

New page

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 [http://chrispederick.com/work/webdeveloper/documentation/ web developer extension's homepage] to download and install and for more documentation. Or get it from the [https://addons.mozilla.org/en-US/firefox/addon/60 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 style|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 [[W3C_validation| 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 ==
* [[Firebug]] for information about Firebug, another powerful Firefox extension for web developers
* [http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en Internet Explorer Developer Toolbar] for a similar tool for Microsoft Internet Explorer
* [http://www.sitepoint.com/blogs/2010/03/23/chrome-web-developer-toolbar/ "The Web Developer Toolbar Comes to Chrome"]

[[Category:Developer tools]]
[[Category:Themes]]
[[Category:Firefox extensions]]

← Older revision		Revision as of 12:05, 24 June 2011
Line 29:		Line 29:
	* [http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en Internet Explorer Developer Toolbar] for a similar tool for Microsoft Internet Explorer		* [http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en Internet Explorer Developer Toolbar] for a similar tool for Microsoft Internet Explorer
	* [http://www.sitepoint.com/blogs/2010/03/23/chrome-web-developer-toolbar/ "The Web Developer Toolbar Comes to Chrome"]		* [http://www.sitepoint.com/blogs/2010/03/23/chrome-web-developer-toolbar/ "The Web Developer Toolbar Comes to Chrome"]
			* [https://addons.mozilla.org/en-US/firefox/addon/toggle-web-developer-toolbar/ Toggle Web Developer Toolbar] Firefox add-on


	[[Category:Developer tools]]		[[Category:Developer tools]]
	[[Category:Themes]]		[[Category:Themes]]
	[[Category:Firefox extensions]]		[[Category:Firefox extensions]]