Features of the Web Developer Toolbar for Firefox
You can download and install the Web Developer Toolbar plugin here:
https://addons.mozilla.org/en-US/firefox/addon/60
The Web Develoepr Toolbar will appear under the row
of Links in your Firefox browser interface. If for some reason
it does not appear, you can reveal it by selecting View > Toolbars > Web
Developer Toolbar.
Below are details on the some of the most helpful menus of the toolbar:
CSS
Since
people can and do set their browsers to ignore style sheets, you should
make sure your page is comprehensible without them. Select CSS >
Disable Styles > All Styles to view your page without the style sheet. Reload the page to restore normal view.
Images
- Reveal images without Alt text by selecting Images > Outline Images > Images Without Alt Attributes.
- Verify the appropriateness of Alt text by selecting Images > Replace Images with Alt Attributes.
- Reload the page to restore normal view.
Information
- To view the names and positions of anchors ("jumps") in your page, select Information > Display Anchors.
- To view the URL targets of your links, select Information > Display Link Details.
- To check for table summaries, select Information > Display Table Information
Resize
The Resize tool lets you see how your page will look on higher and lower screen resolutions. The most common screen resolutions are 800 X 600 and 1024 X 768, so it is good to test both. (e.g. select Resize > 800 X 600). You can add more options by selecting Edit Resize Dimensions. . .
Tools
- Validate your HTML by selecting Tools > Validate HTML.
- Validate your links by selecting Tools > Validate Links.
- The Validate WAI option uses "Cynthia Says," an online version of the AccVerify accessibility checker the CSUN webmaster uses.