|
|
| Line 1: |
Line 1: |
| 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].
| | {{Moved_to_dev_docs}} |
| | |
| == 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 ==
| |
| * [[Development: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]]
| |
