Essential tools For Web Development

As a web developer, having a decent set of FireFox extensions is critical for me. FireFox addons can help a lot when it comes to debugging, testing and ensuring your website is up to standard. So I thought I would compile a list of the best ones I have come across, and the ones I use. Here are my top web development FireFox extensions:

1. Web Developer Toolbar
This extension is simply the best. Comes in at number 1 for me. It adds a menu and a toolbar with various web developer tools.

It allows you to disable form elements, modify form elements on the fly, modify cookie settings, parameters, view and edit CSS styles of the page you are on, view form details, test your website for W3C standards, test for different browser sizes.. and the list goes on and on. Its definably something every web developer needs. You can read more about it here.

2. Firebug
This is number two for me. The amount of times this tool has helped me in debugging some fiddly JavaScript has been countless.

This tool lets you Inspect and edit HTML & JavaScript on the fly, Visualize CSS metrics, Monitor network activity, Debug and profile JavaScript, Explore the DOM and much more. Check it out, I learn something about this tool every time I use it!

3. SplitBorwser
This splits the content area of the browser window as you like. It will help you in various cases. For example, to compare multiple webpages, to show a calendar always, and so on.

I have found this very very usefull in comparing sites. Especially if you combine it with FireFox IE Tab (so you can test something in IE and Firefox in your FireFox Browser split screened!

4. IE Tab
As mentioned above, this is great especially if you combine it with SplitBrowser for testing compatibility both IE and FireFox in one screen, split screen.

Simple, and works like a charm.

5. UrlParams
This is a great simple idea - to show you the HTTP GET/POST parameters. Of a website in a sidebar. You can alter these values, add new parameters or switch from GET to POST.

6. ColorZilla
Thanks to Steve from WebCommons.biz for pointing this one out/ ColorZilla is a simple addon that gives you the HTML code and RGB code of any color you can see on your browser. Very handy.

7. TamperData
TamperData is an extension to track and modify http/https requests. It’s similar to UrlParams. You can use it for security testing of Web based applications as well as tracking request/responses. Its much more detailed than URL params as it gives you the timing of each Request/Response as well as showing you the HTTP content header.

A very nerdy tool, especially for all you network traffic lovers out there…

8. XML Developer Toolbar
This extension was modled to be like the ‘Web Developer Toolbar’ mentioned above. Except its soley focused on XML development. It lets you do things like; Schema & DTD Generation, XML -> Schema Validation, Style Manipulation, XSL Transformations on-the-fly and the mandatory DOM Inspector.

It recently got upgraded to work with FireFox 2 - so get it!!

9. FireFTP
So you don’t have to leave your browser to FTP those files!

Simple - and works so well.

10. Chickenfoot
Now this gets my award for the Web Developer extension with the most potential out of all of them. Chickenfoot is a Firefox extension that puts a programming environment in the browser’s sidebar so you can write scripts to manipulate web pages and automate web browsing. In Chickenfoot, scripts are written in a superset of Javascript that includes special functions specific to web tasks.

Its very simple. It sits on a side bar, and lets you type basic scripts to do things, like automate a form being filled out, modifying a page, or navigate between pages, it can all be scripted. I got the basic example going within 1 minute, its very easy to get started on this, and the possibilities are endless…

11. MeasureIt

MeasureIt lets you measure in pixels anything on the screen. I have found this to be very helpful in graphic design stuff.

12. Session Manager

Session Manager saves and restores the state of all windows - either when you want it or automatically at startup and after crashes. Its great to clear particular sessions for particular tabs to perform any session type tests you may be doing.

13. Load Time Analyzer
This extension is pretty cool. It allows you to measure and calculate how long web pages take to load in Firefox. Results are broken down by individual elements, and it’s also got a graphic feature that lets you see where the load times weight is. Still got a bit of work to do in terms of making the graphic look nice, but works well. Note: This doesn’t work when you have multiple tabs open - it calculates the load times across all HTTP requests happening at that moment.

14. YSlow for Firebug
If you liked Load Time Analyzer then you will love this. It’s probably the best performance analysis Firefox extension I have found yet. It leverages of the existing Firebug extension, and the guys at Yahoo have made this quite nice. Its split into 3 main views: 1) A performance view which shows you step by step what’s happening with recommendations. 2) A Stats View - to show you download times and file sizes in a lot of detail and 3) a Components View - showing you each component that’s downloaded and its individual HTTP header. Very impressed - Good stuff Yahoo!
Its also got a Podcast and Screencast explaining more about the Firefox extension.

15. Regular Expressions Tester Great Regex testing tool for firebug. Has highlighting and updates expected result sets live as you type your regex.

16. Fire PHP

Firebug PHP lets you print any PHP code and dump things like arrays to the FireBug console. It’s awesome if you are doing some PHP development.

17. iMacros


iMacros is very similar to Chicken foot, but without the extensive JavaScript. If you want to automate something with JavaScript (and use the JS DOM) - use ChickenFoot, if you want to automate something graphically - use iMacros Record and replay repetitious work. Anything from filling out forms, remembering passwords, testing forms etc… A great time saver!

So there you have it! Those are my Top 17 Essential FireFox Web Developer Plugins.