Top 8 Firefox Add-Ons for Web Development

As a web developer, you will never have too many tools to help you work faster and better. Mozilla’s Firefox web browser has a feature called “add-ons,” which are similar to extensions or plugins that add more functionality to the browser. Not all add-ons are available on all operating systems. The add-ons discussed here are available for Firefox 11, OS X Lion 10.7.3 and Windows 7.

Firefox 11 comes with a lot of great website building tools out of the box. On the Mozilla website it has the following:

Web Console:

View log messages from your JavaScript code, JavaScript and CSS errors, and network activity here. You can search and filter to find only the events you want to see. JavaScript also allows you to interact and look around the site.

Page Inspector lets you see how each webpage looks by visually selecting the part of the page you want to view.

Scratchpad:

With Scratchpad you can write JavaScript code that can directly interact with web page content.

Although Firefox already comes with these powerful tools, you can add more features to make it even more powerful. Here are some of my favorite web development add-ons:

Web Developer 1.1.9:

Also known as the Web Developer Toolbar (WDT), this plugin adds several tools to your browser for use by web developers. With it you can quickly close any JavaScript, CSS or image files on your website. The toolbar also gives you easy access to any cookies, meta tag information or forms on the web page you are viewing. Autofilling forms for form testing is one of my favorite features. The “Name” of the form element is used as the form value. This saves you a lot of time when testing forms with multiple fields. I can’t use all the functions of the WDT yet because it has a lot.

Firebug 1.9.1:

Firebug works with Firefox, giving you access to a variety of development tools while browsing. You can edit, debug and view CSS, HTML and JavaScript of any web page in real time. It is similar to the web console and page inspecter that comes with Windows, but with more features. Some developers will talk about which WDT or Firebug is better. From what I can see, WDT is better suited for front-end designers who do a lot of CSS coding, while Firebug is better suited for debugging JavaScript and AJAX and building websites. I say you should use both.

MeasureIt 0.4.10

MeasureIt 0.4.10 allows you to drag rulers onto any web page to check the width, height or alignment (in pixels) of page elements. This ruler is one of the most useful things I have ever bought.

Firesizer 1.7

Firesizer 1.7 allows you to resize the window to a specific size. This add-on tells you how big the current browser window is in pixels.

HTML Validator 0.9.5.2:

Adds HTML validation to the browser’s view page source. The plugin is based on two algorithms called Tidy and OpenSP. Both are produced by the Web Consortium W3C. If you view the HTML source of the page, you can see the details of the error. If code correctness is important to you, try this. Although WDT has an HTML validator, the validation results come from another website and are not displayed with the page’s source code.

Rainbow 1.5.1

Rainbow 1.5.1 has a color picker, an eyedropper and a way to save colors. You can experiment with colors by dragging and dropping them. Want to understand a specific blue HEX code in a JPEG file without using an image editor like Photoshop? It’s easy to do with rainbows.

Lazarus:

Form Recovery 2.3: Lazarus automatically saves all forms securely as you type, allowing you to recover form data after a crash, server timeout, or whatever. If you have a lot of forms to test and want to use real form content, this plugin makes things easier.

FireFTP:

FireFTP is a free, secure, and cross-platform FTP/SFTP client for Mozilla Firefox that makes accessing FTP/SFTP servers easy and simple. If you know how to use FileZilla, you know how to use FireFTP.

Of course, you can download the latest version of Firefox from the Mozilla website.

Related Posts

Leave a Reply

Your email address will not be published.