# Tuesday, December 11, 2007
Tuesday, December 11, 2007 4:11:50 PM UTC
« [Previous Post] Indiana Jones and the ... Visual SourceSafe 2005... [Next Post] »

Get Firefox

Over the past few years, I’ve accumulated a collection of add-ons for FireFox that I genuinely use almost daily to do my job. I’ve seen other “top development add-on” lists, and I don’t really agree with all of the items. With that said, here goes my take:

  1. Console2
    http://console2.mozdev.org/index.html

    Allows you to filter the JavaScript Console by type, language and context, compared to the way the console works by default where it just shows everything all in line. You don’t really notice it, because it should’ve been built into Firefox to begin with.
  2. Firebug
    http://www.getfirebug.com/

    Adds an full JavaScript debugging solution to Firefox and much more. Also helps debug your AJAX applications, because it has a network activity view to show you the ins and outs of your page. I can’t live without this add-on, really. Being able to set a breakpoint in my JavaScript and fully explore the DOM/variables while debugging is immensely helpful.
  3. HackBar
    https://addons.mozilla.org/en-US/firefox/addon/3899

    Just recently found this. It adds a toolbar to Firefox that helps you test for security problems with your app, mainly with querystrings/URLs. Gives you tools to automatically increase/decrease values, test for SQL injection, etc.
  4. HTML Validator (based on Tidy and OpenSP)
    http://users.skynet.be/mgueury/mozilla/

    Another “core” add-on I use, that I couldn’t live without. This one adds native HTML validation inside of Firefox. You can use different types of validation, and choose how strict it is with your code. Even checks for accessibility problems. Use this and find out just how syntacticly bad your HTML really is.
  5. LiveHTTPHeaders
    http://livehttpheaders.mozdev.org/

    Like the name implies, shows the live HTTP headers of your page, underneath the “View Page Info” section of Firefox, or via a pop up window in “realtime”. Lets you also change the headers and re-send the request. Kinda like Fiddler, but built into Firefox.
  6. Save As Image
    https://addons.mozilla.org/en-US/firefox/addon/3408

    Again, like it implies, it saves a webpage as an image. Useful for generating “thumbnails” of site designs, bug snapshots, etc.
  7. Server Spy
    http://jacquetc.free.fr/mozilla/exts/ServerSpy/

    Shows (on the bottom of the browser) what web server software the current domain is running. Useful for planning out what web capabilities you’re working with when initially meeting with a client.
  8. ShowIP
    http://l4x.org/frontpage/showip

    Shows (on the bottom of the browser) what the current web server’s IP address is. You can then query that IP address with numerous lookup services to find history, etc. Useful for knowing what server you’re on, or figuring out a domain/subdomain’s structure.
  9. URLParams
    http://urlparams.blogwart.com/share/index.php

    Adds a sidebar to Firefox that makes it very easy to edit GET (querystring)/POST (form) variables, as well as change your referrer, and submit them again.
  10. View Rendered Source / View Source Chart
    http://jennifermadden.com/scripts/ViewRenderedSource.html

    Visually displays the source code of your page, using literally “blocks” of varying colors to represent each element in your code. Each block is collapsable as well. Gives you a quick way to see how deep an element is nested, where it’s nested, what tags are used, etc.
  11. Web Developer
    http://chrispederick.com/work/web-developer/

    One of the most important add-ons. Adds a toolbar to the top of Firefox that has almost everything a web developer could ever want/need for tweaking pages, tracking down problems, editing CSS on the fly, etc… This toolbar has it all. Really, go check it out now and install it. If you don’t install anything else on this page, you need to at least install this one.
  12. Autofill Forms
    https://blueimp.net/mozilla/

    Like it says, it automatically fills forms! Useful for filling out forms with test data repeatedly.
  13. Cache Status
    https://addons.mozilla.org/en-US/firefox/addon/1881

    Adds a section to the bottom of Firefox showing current memory and cache usage, and allows you to right click and reset/clear the caches (RAM/disk.) I use it just to have that cache clearing shortcut.
  14. IE View Lite
    https://addons.mozilla.org/en-US/firefox/addon/1429

    Adds a right-click menu to your page that brings up the current URL in Internet Explorer. Useful for quickly jumping to “the other browser” to see what it looks like over there.

P.S. — An e-mail from Mike at HireAHelper.com prompted me to write this list. Check out his site if you need moving help, landscaping or general help!

 
Tuesday, December 11, 2007 4:59:04 PM UTC
hey Nick! Thanks for this. I've been meaning to ask you if you had any good suggestions. I see a couple of ones I hadn't heard of and will have to install and try out. Viva la Blog-O-Rama!
Aaron
Monday, February 18, 2008 1:07:44 AM UTC
i know you're pretty busy. There is no info anywhere, even Wikipedia, on explaining how to use FireFox add-on Web Developer. I am in the process of learning how to set up a Web site. If you know where i could get info. i'd appreciate it. Or do i just have to play around. Thanks.
Tuesday, February 19, 2008 3:20:35 PM UTC
Maureen, I would check out the official web developer toolbar homepage:

http://chrispederick.com/work/web-developer/
Name
E-mail
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, strike, strong, sub, sup, u) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):

Live Comment Preview