Friday, June 27, 2008

Web developer extensions for Mozilla Firefox

If you're a web developer, you develop your websites in Firefox or at least test them in Firefox. I'm going to discuss some Mozilla Firefox extensions that make life much easier as a developer.

1. Web Developer
This is an essential extension for any web developer. Here are some of the most beneficial features of the toolbar:
  • Outline table cells and block level elements
  • Validate HTML and CSS
  • The Edit HTML and CSS feature let's you change HTML on a live web page. This can be very helpful when working on the design of a web page because you don't have to do the: Ctrl+S, Alt+Tab, F5 routine to see changes. I don't use WYSIWYG editors. They mess up HTML code.
  • In the Options menu, there is a setting to View Source in a new tab rather than a new windows. Very cool!
This toolbar offers many other amazing features as well. Try them out for yourself.

2. HTML Validator
While the Web Developer toolbar does have HTML validation, this extension let's you validate HTML code without requiring that your site is online and accessible to the public. The Web Developer toolbar uses the W3 online validation tool. This validates HTML and shows errors on your View Source window in Firefox. Similarly, there is a CSS validator extension.

3. Tamper Data
This Firefox extension let's you see what request headers are sent to the web server and which response headers are received from the web server. You can view any post data or cookies that the server sets. Additionally, the extension lets you modify headers. Great for discovering security holes in your website.

4. Google Pagerank Status
The Google Pagerank Status can be helpful to see where your website stands in the search rankings.

5. Firebug
Firebug adds helpful web development tools to Firefox. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. I leave it disabled much of the time, because there have been reports of memory leaks. Running too many Firefox extensions will do this.

6. All-in-One Gestures
This mouse gesture extension may not necessarily be related to web development, but it is a great time saver. I rely on this extension to quickly perform common tasks such as navigating forward, backward, opening / closing tabs, refreshing, and viewing source. One of my favorite features is the Undo Close tab. Ever accidentally close a tab? Simply configure a mouse gesture to bring it back up. I configured mine to be a Z gesture since Undo is Ctrl+Z. You can undo multiple tabs.

7. Greasemonkey
Again, I don't necessarily use this extension for web development, but it is extremely helpful. Ever wish you could update a menu on a website or make it more user friendly? Do you have pages with long drop downs that you repeatedly have to scroll through in order to locate your option? With just a bit of JavaScript, you can update websites that you access often to save time.

I recommend at least testing out all of these extensions. You can easily disable an extension if you don't wish to use it all the time.

1 comments:

peter said...

This was very concise and helpful material.

More pictures!