# Firefox Add-Ons for Web Developers Here’s another cool add-on [http://www.getfirebug.com/](http://www.getfirebug.com/) firebug is similar to the “web developer” firefox plugin but amped up. And another [http://developer.yahoo.com/yslow/](http://developer.yahoo.com/yslow/) more on yslow here [http://www.phpied.com/yslow-performance-extension-for-firebug/](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/](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](http://www.iosart.com/firefox/colorzilla/) – Advanced Eyedropper, ColorPicker, Page Zoomer, and other goodies. (Windows Only) - [HTML Validator](http://users.skynet.be/mgueury/mozilla/) – Tidy for FireFox! Highly recommended for web developers. Lets you check your page’s validation by doing a **View / Page Source**. - [FireBug](http://www.getfirebug.com/) – 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.](http://www.ddj.com/dept/debug/196802787) - [MeasureIt](https://addons.mozilla.org/extensions/moreinfo.php?id=539) – Provides a ruler to measure the width and height (in pixels) of any element on a webpage. - [View Formatted Source](https://addons.mozilla.org/firefox/697/) – Displays CSS being applied to each element. Great for debugging. - [View Source Chart](https://addons.mozilla.org/firefox/655/) – Tame tables and containers. Great for debugging. - [IE Tab](https://addons.mozilla.org/firefox/1419/) and/or [IE View](https://addons.mozilla.org/firefox/35/) add-ons to emulate IE functionality in Firefox. More on [IE Tab here](http://mi6.ais.ucla.edu/devbriefs/ie-tab-extension-for-firefox). - [Copy Plain Text](https://addons.mozilla.org/extensions/moreinfo.php?id=134) – Allows you to copy plain text into editors directly from a webpage without having to go through notepad etc. - [Load Time Analyzer](https://addons.mozilla.org/firefox/3371/) – Allows developers to measure and graph how long web pages take to load in Firefox. - Web Developer (see below) --- [Web Developer](https://addons.mozilla.org/firefox/60/) – 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](https://kb.ucla.edu/link/220)