Bop Design Identifies the Top 8 Firefox Add-ons for Web Development

San Diego, CA (PRWEB) May 03, 2012

A web developer can never have enough tools to help make web development faster and more efficient. Mozilla’s Firefox web browser has a feature called add-ons (similar to extensions or plugins), which add extra features to the browser. Bop Design, a San Diego web design agency with offices also in New Jersey, has selected the top 8 Firefox add-ons to help web developers streamline the web development process.
Firefox 11 already has very impressive tools for web development. It includes (descriptions from mozilla.org):

Web Console – Lets you see logging messages from your JavaScript code, JavaScript and CSS errors and network activity. Search and filter to find just the events you need to look at. Plus, you can directly interact with and explore your page via JavaScript.

Page Inspector – Peek right into the styling of any Web page by visually selecting the page element that you’re interested in.

Scratchpad – Scratchpad lets you write JavaScript code that can interact directly with the contents of a Web page.

With these powerful tools already included,Bop Design’s Web Development Director, Jordan Paraso has selected the top 8 add-ons specifically used for web development.

1. Web Developer 1.1.9 – (http://chrispederick.com/work/web-developer/) Also known as the Web Developer Toolbar (WDT), this add-on installs various web developer tools to the browser. It will allow you to quickly disable any JavaScript, CSS or image files on website. The toolbar also gives you easy access to any cookies, meta tag information, and forms on the web page you are viewing. Paraso adds, “One of my favorite features is the ability to auto fill forms for form testing. The ‘name’ of the form element will be used as the form value, so when testing a form with many fields, this feature will save you plenty of time. The truth is, the WDT has so many different features, I haven’t been able to use them all yet!”
2. Firebug 1.9.1 – (http://getfirebug.com/) Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. It’s like the built in Web Console and Page Inspecter but with more features. Paraso contends, “Some developers will debate on which is better, WDT or Firebug. From my experience, WDT is more suited for front end designers that do a lot of CSS coding and Firebug is better for JavaScript/AJAX debugging and development. I say use them both.”
3. MeasureIt 0.4.10 – (https://addons.mozilla.org/en-US/firefox/addon/measureit/) Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels. “This ruler is one of the handiest add-ons I’ve used.”
4. Firesizer 1.7 – (https://addons.mozilla.org/en-US/firefox/addon/firesizer/)
   Allows you to resize the window to specific dimensions. This add-on shows the dimensions of the current browser.
5. HTML Validator 0.9.5.2 – (http://users.skynet.be/mgueury/mozilla/) Adds HTML Validation to the View Page Source of the browser. The add-on is based on Tidy and OpenSP, both algorithms that were originally developed by the Web Consortium W3C. The details of the errors are seen when looking the HTML source of the page. Paraso suggests, “If you care about your code being valid, then try this out. Although the WDT has a HTML validator feature, those validation results are shown to you from an external website, rather than being shown along with the page’s source code.”
6. Rainbow 1.5.1 – (https://addons.mozilla.org/en-US/firefox/addon/rainbow-color-tools/) This add-on has a color picker and eyedropper + saving colors. It allows you to try out colors with drag and drop. Want to know the hexadecimal notation (HEX) color of a particular blue that is in a jpeg image without needing an image editor (like Photoshop)? With Rainbow, it’s no problem.
7. Lazarus: Form Recovery 2.3 – (https://addons.mozilla.org/en-US/firefox/addon/lazarus-form-recovery/) Lazarus securely auto-saves all forms as you type, so after a crash, server timeout, or whatever, you can go back to the form and get the form data back. Paraso suggests, “If you have a lot of forms that need testing and would like to use actual form content, this add-on will make it a less tedious task.”
8. FireFTP – (https://addons.mozilla.org/en-US/firefox/addon/fireftp/?src=userprofile) FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. “If you are experienced with FileZilla, FireFTP will be familiar.”