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. 
 
 See also, https://kb.ucla.edu/link/220