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.

FireBug – Allows live HTML, CSS, and JavaScript edits and lets you visualize CSS metrics. MUST HAVE for debugging and web developing. Apparently it’s also good for viewing and debugging Ajax traffic.

MeasureIt – Provides a ruler to measure the width and height (in pixels) of any element on a webpage.

View Formatted Source – Displays CSS being applied to each element. Great for debugging.

View Source Chart – Tame tables and containers. Great for debugging.

IE Tab and/or IE View add-ons to emulate IE functionality in Firefox. More on IE Tab here.

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.