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 (descriptions from mozilla.org):
- Page Inspector – Peek right into the styling of any Web page by visually selecting the page element that you’re interested in.
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:
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.
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 window in pixels.
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. 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.
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.
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. 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.
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.