13 Firefox Add-ons For Web Development

    Sean P Aune

    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.


    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.


    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.


    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.


    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.


    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.


    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.


    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.


    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.


    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.


    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.


    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!