Programming - - By Sean P Aune

13 Firefox Add-ons For Web Development

While Firefox is a web browser first and foremost, thanks to its enormous add-on development community, it has been made to do just about anything you can dream up.  Luckily for web designers and developers, there are a lot of really handy tools for FTPing, coding, checking your work and so on. And they all work like a breeze, hopefully making your work a little less hectic by not having to jump around to different programs as much.

One caveat to all of these enticing add-ons is to remember that the more you have running, the slower your browser will run, so try to show some restraint when choosing which ones you want to add.

AdBlock Plus: While this may seem like an odd choice for a list about tools to help designers, due to its frequent use it never hurts to see how your design will look when users are running this particular add-on.

adblock plus

CodeBurner: CodeBurner for Firebug is an essential reference tool for web developers. It displays syntax, code samples, and browser compatibility information in a handy dock at the bottom of the browser, and was created for SitePoint by James Edwards, a JavaScript guru and author (until the updated version is approved on the Mozilla add-ons site, you’ll need to grab the latest version, which is compatible with Firefox 3.5, from here).

A new version of CodeBurner has been released. This release does not rely on Firebug — it’s a standalone extension, and for a limited time comes bundled with a free book! Grab yours now.

codeburner

Console²: Console² is a replacement for the JavaScript console that allows you to display errors filtered by type (Errors, Warnings, Messages), languages (JavaScript, CSS, XML) and context (Chrome, Content).  It will also allow you to search, hide duplicate entries, customize the toolbar and more.

console2

DOM Inspector: DOM (Document Object Model) Inspector will allow you to inspect, browse, and edit documents.  You can inspect a currently open window or enter a URL for the add-on to inspect.

di_menu

Firebug: Probably the most essential tool for any developer using Firefox. Firebug will allow you to monitor the activities of a page you are visiting, write new code, debug what you’ve already worked on and a whole lot more.

firebug

FireFTP: You’re already doing a lot of your work inside of the Firefox browser, why not also use it to FTP files to and from your server? Beyond just transferring files, FireFTP allows you to sync directories, search/filter, run integrity checks, edit remotely, drag & drop, hash files and a lot more.

fireftp

HTML Validator: Just as the name of this add-on implies, HTML Validator is all about making sure that your code is up to par.  You can also check pages that you are visiting, and thanks to a little indicator in the corner of your browser, you’ll quickly see if the page is in compliance or has errors.  Once you click on the indicator you will see a full version of the code that will identify what the problems are.

html-validator

HttpFox: HttpFox monitors all incoming and outgoing HTTP traffic between the browser and servers. Reports include request and response headers, sent and received cookies,  querystring parameters, POST parameters and response body.

httpfox

Pixel Perfect: Pixel Perfect works withFirebug to allow developers to overlay composition over their HTML coding to see how many pixels they are off by.  You can change the opacity to whatever settings you prefer so you can line up your work as perfectly as possible.

pixel-perfect

Tamper Data: Tamper Data allows you to view and modify HTTP/HTTPS headers, trace and time your HTTP responses & requests, conduct security tests on the POST parameters and more.

tamper data

View Dependencies: View Dependencies adds a tab to the page info window to show you all of the files included with loading the page you are viewing.  The files are broken down by the server they are loaded from, the size of each file, the total load per server, the total load of the page and more.

viewdep

Web Developer: A straight-forward add-on that gives you some extra menu selections for using and disabling different cascading style sheets so you can test them out.

web-developer

YSlow: YSlow is a Firefox add-on that integrates with the popular Firebug tool for Firefox.  YSlow applies three predefined rulesets or a user-defined ruleset to test the performance of a page. Then, it suggests things you could do to improve it.

yslow

I hear that the guys at SitePoint HQ are cooking up yet another very cool Firefox add-on real soon now … watch this blog for more details later this week!

Sponsors