As a web developer, you 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. Note: Not all add-ons are available for all OS platforms. The add-ons discussed here are compatible with Firefox 11, OS X Lion 10.7.3 .
Firefox 11 by default already has very impressive tools for web development. It includes:
- 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, there are actually even more features you can add to Firefox for even more power. Here are my favorite add-ons specifically used for web development:
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. 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!
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. 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
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
Allows you to resize the window to specific dimensions. This add-on shows the dimensions of the current browser window in pixels.
5) HTML Validator 0.9.5.2
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. 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
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
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. 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
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.
