Firefox Add-Ons for Web Developers

Here’s another cool add-on

http://www.getfirebug.com/

firebug is similar to the “web developer” firefox plugin but amped up.

And another http://developer.yahoo.com/yslow/

more on yslow here
http://www.phpied.com/yslow-performance-extension-for-firebug/

Firefox Add-on’s are small extensions that add new functionality to Mozilla Firefox. They can add new features, toolbars, and are completely customizable.

It is in a developers interest to peruse Firefox’s “Developer Tools” and “Website Integration” add-on categories to find extensions which fit your work style: https://addons.mozilla.org/firefox/

—

TO INSTALL: Click the link, wait a moment until you can click the “Install Now” button that pops up, wait for it to download, and restart your browser.

TO REMOVE: If it’s a toolbar, you can hide them under View > Toolbars, un-checking (selecting) Web Developer, for example. To remove it all together, select Tools > Extensions, selecting the extension and pressing Uninstall on the bottom left.

  • Colorzilla – Advanced Eyedropper, ColorPicker, Page Zoomer, and other goodies. (Windows Only)
  • HTML Validator – Tidy for FireFox! Highly recommended for web developers. Lets you check your page’s validation by doing a View / Page Source.
  • MeasureIt – Provides a ruler to measure the width and height (in pixels) of any element on a webpage.
  • Copy Plain Text – Allows you to copy plain text into editors directly from a webpage without having to go through notepad etc.
  • Load Time Analyzer – Allows developers to measure and graph how long web pages take to load in Firefox.
  • Web Developer (see below)

Web Developer – For web developers and programmers. Useful functions include:

1. Disable > Disable JavaScript. This can reveal what we deliver, or don’t, for the 1.5% who have JavaScript off.
2. Cookies. If your UCLA site uses cookies, you can see how it breaks down if cookies are turned off.
3. CSS. To have a truly accessible site, turning off the CSS should show a fairly logical structure. Or not.
4. Resize. You can check how it looks at 800×600 even if your monitor has a larger resolution, and how your site fits for the < 10% who stick with the smaller resolution.
5. Tools. Something to consider for setting a standard: valid HTML, CSS, feeds, and Section 508/WAI accessibility. This is a tedious process, on a programming end, but it’s a professional step to make it check out with web accessibility standards — a step beyond if it just “works” in IE/Firefox.

See also, https://kb.ucla.edu/link/220

Back to top