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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.besalighting.com The Schaef

    I have half of these installed on my browser already, and just added YSlow.

    One thing about Codeburner, it is currently not shown as compatible with >= 3.5, so it got disabled for me. Other than that, I think these tools are awesome, especially the ones that integrate with Firebug.

  • Elyézer Mendes Rezende

    Google Page Speed[1] is another very good add-on for Firefox with Firebug

    [1]http://code.google.com/speed/page-speed/

  • http://www.magain.com/ Matthew Magain

    The update to CodeBurner which brings Firefox 3.5 compatibility is in the queue, waiting for approval from the Mozilla Add-ons team (who I imagine are probably swamped with similar requests).

    Until that happens, you can always install the latest version of the tool from sitepoint.com, so that you can use it with Firefox 3.5 right now.

  • http://lantner.net/david/ davidlantner

    This is a nice list, but you portray the Web Developer add-on as just a CSS tool even though it is quite powerful. Poke around and you’ll see it’s loaded with all kinds of handy features.

    I recently discovered the new Collections feature of the Mozilla Add-ons site where you can take a set of add-ons (like this list) and create a collection that users can subscribe to and be notified of updates, etc.

    Create one for yourself like I did – view my collection – to facilitate installing your favorite add-ons to various copies of Firefox.

  • biswa

    Great collection realy nice I also use this browser ,it’s save my time and money.

  • http://lantner.net/david/ davidlantner

    Oops, I forgot to add a link just to the main Collections page:

    https://addons.mozilla.org/en-US/firefox/collections/

  • http://www.cemerson.co.uk Stormrider

    Out of those I have Adblock Plus, Firebug, Codeburner, Fire FTP and Web Developer. I don’t see the need for the Pixel Perfect one – I don’t really think getting a page pixel perfect is that important. Web is not print!

    Some others that I find useful that you missed: Total Validator, ColorZilla, Screengrab!, and Custom Toolbar Buttons – because it has a very useful ‘Toggle Styles’ and ‘Toggle Javascript’ button included!

  • http://www.anistock.com anistock

    Firebuy and fireFTP do it for me, super tools.

    Tried screengrab but flaky

  • Raven-X

    For me, Web Developer toolbar is absolutely crucial to speeding up my development, there are far TOO many features to list off but I love on the fly validation.

  • http://www.lunadesign.org awasson

    Web Developer’s Toolbar, FireFTP, FireBug, & Codeburner are my best friends for web development.

    I also have Netcraft Toolbar for “what this site is running” exploration. Mostly it’s turned off and I have the seobook.com toolbar which I turn on if I want to have a look as well.

    The Developer Toolbar is on all the time and I use it for viewing source, validating HTML/CSS on the server or just locally. I also use it to clear or check cookies, clear my cache, do a speed report, turn off images/CSS, etc… Oh and you can display line guides as well and drag them around your page.

    FireBug is my other can’t live without tool. I use it to inspect and correct CSS issues all the time… I mean all the time… It is awsome. It’s also great for just viewing the makeup of a page on the fly to see what is going to be possible for future updates and additions while on the phone with a client.

  • http://dtracorp.com dtra

    html validator doesn’t work on mac unfortunately

  • http://www.magain.com/ Matthew Magain

    CodeBurner 1.2 (Firefox 3.5 compatible) has been released from the sandbox.

  • peterSK
  • Herbalite

    No mention of GreaseMonkey so far?

    https://addons.mozilla.org/en-US/firefox/addon/748

    There’s no better “on the fly” tool to customize a page that I am aware of. I also use it to quickly develop design changes, mock ups of future extensions how they could look like. Just using a few lines of javascript with which I can manipulate DOM and even create new style elemtns

    I can show my customers instantly how certain changes would look like, can change most things on the fly, without touching their live website. Besides of impressing the customer, it save me a lot of effort as I often end up having the altered or new design elements already handy.

    Not to mention that I use it to suppress any clutter on my frequently used websites.

  • http://www.cemerson.co.uk Stormrider

    Herbalite: Firebug does most of the things I’d want from Greasemonkey already

  • Herbalite

    @Stormrider:

    I’m using both. FireBug is the feature richer tool, no doubt. Greasemonkey’s ability to customize pages, store a script that is then being applied based on the URL is just neat. Not to mention I can define the URL range a script should apply to with include and exclude paths, makes that part much more versatile. And there’s a host of ready made scriplets out there.

    Also, when working with a group of designers that work on different places it’s very useful write a demo script, share it instantly with other developers, and since the script has instructions how it should be installed, including URL ranges, I can be assured that they will see the same as I do, and we discuss the same thing. The send me back their suggestion, extending the script. It’s harder to do the same with FireBug alone and especially if not wanting to mess with the live or developer site, etc.

    Ideally Greasemonkey should be made an extension to FireBug. That is for us developers, for others the standalone add-on is much easier to use. Which is another plus. Since I don’t have to force non developers to use Firebug to show something to them.

    IMO both tools have their rightful place.

  • http://www.cemerson.co.uk Stormrider

    Yeh, I’ve Grasemonkey (and Stylish, the CSS ‘version’) installed before, but couldn’t find anything I actually wanted to do with it, so removed it after a while. I’m quite happy just editing the HTML on a ‘prototype’ version of the site to display changes really.

  • http://www.dangrossman.info Dan Grossman

    I use Screengrab all the time. It’s an extension that allows you to save or copy-to-clipboard the viewport, or the entire page (meaning beyond what you get just alt+PrintScreen’ing).

    https://addons.mozilla.org/en-US/firefox/addon/1146

  • http://www.rachelreveley.co.uk artemis

    @ davidlantner

    This is a nice list, but you portray the Web Developer add-on as just a CSS tool even though it is quite powerful. Poke around and you’ll see it’s loaded with all kinds of handy features.

    I was about to make the same comment. The web developer toolbar rocks and should be at the top of any such list.

    The CSS editor (ctrl shift E)(cmd shift E) has saved me many hours of pain and suffering as it updates the page with your edits instantly within Firefox and the outline tool (ctrl shift F)(cmd shift F) is great for finding out what is going on with your page elements and finding out what parents an element belongs to.

    I only wish IE had the exact same tool.

  • jedweb

    Note that HTML Validator is not available for Mac.

  • http://www.lunadesign.org awasson

    @jedweb: If you get the Web Developer’s Tool Bar, you can use the Tools -> Validate HTML or Tools -> Validate Local HTML. You can also validate CSS, XML Feeds, Links and more.

  • http://www.killerinstinct.co.za dele454

    Fireshot amazing for screen grabs

  • reivax

    Looks like you forgot XulProfiler, which is a great profiling tool that will even show the display zones where most time is spent redrawing…

  • L2g3

    These two add-ons could also be useful.

    MeasureIt
    https://addons.mozilla.org/en-US/firefox/addon/539

    View Source Chart
    https://addons.mozilla.org/en-US/firefox/addon/655

  • cb22hh

    For those of you who need to publish mathematical formulas make sure to check out Firemath:

    http://www.firemath.info/

  • Tim Reily

    Web developers should also do some testing. For my web (regression) tests I use the iMacros addon. Very easy to use. https://addons.mozilla.org/en-US/firefox/addon/3863